Полезно ли использовать макет жидкости?

Ответ 1

Я вообще думаю, что макеты жидкостей - хорошая идея. Проблема начинается, когда ваш макет жидкости начинает становиться действительно широким с экранами с высоким разрешением - существует предел тому, насколько человеческий глаз может отслеживать горизонтально, не теряя вертикального позиционирования. Вот почему газетные колонки, например, всегда довольно узкие.

Попробуйте взглянуть на википедию на экране с высоким разрешением, и вы увидите, что они ограничивают максимальную ширину чем-то около 800-900 пикселей - более того (при условии стандартного шрифта 12pt), и люди перестают быть в состоянии читать до конца линии, а затем легко найти начало следующей линии, и все это ломается в беспорядок напряжения глаз и шеи.

На веб-сайтах, которые я создаю, я использую max-width, чтобы ограничить максимальную ширину текстового содержимого (и в том числе и изображения и другие вещи) примерно до 720-800 пикселей, которые с боковыми панелями и, возможно, около 1000px. Если экран шире, тогда, либо центрируйте содержимое слева, выравнивая его (выравнивание по правому краю на веб-сайтах RTL) - оба работают хорошо.

Но вы должны проектировать свой макет так, чтобы он течет, когда доступная ширина уже - это очень полезно для людей с нетбуками (которые сейчас довольно популярны, и я ожидаю, что они станут более популярными в будущем), смартфонов и даже небольшие мобильные устройства. Такие мобильные устройства все чаще используют стандартные браузеры, и вы должны учитывать это в своих проектах - даже если мобильные браузеры могут каким-то образом уменьшить ваш сайт, "мобильный режим" обычно делает это, испорчая страницу и убивая ваш предполагаемый пользовательский опыт.

Ответ 2

оставляя 980 пикселей неиспользуемых в 24-дюймовом мониторе, просто кажется странным, чтобы не сказать неправильно

Id не согласен здесь. Если у вас есть монитор с высоким разрешением, вы, вероятно, не работаете с максимизированным окном браузера. И даже если вы, неужели вы действительно суетились, что содержимое все в фиксированной области посередине? Действительно?

До тех пор, пока ваш сайт имеет достойную, удобную компоновку, я не вижу проблемы с пространством с обеих сторон на мониторах с высоким разрешением.

Ответ 3

Есть способы создать разные правила @media внутри таблицы стилей. У W3C есть что-то на этом и хотя это большой Schroedinger Cat, будут ли браузеры карманных компьютеров подчиняться правилам, достаточно безопасно предположить, что даже если они этого не делают, у них есть достаточно большие и хорошо сбалансированные экраны, чтобы просто использовать масштабную модель сайта, как это показано на рабочих столах.

Мне кажется, что наилучшим интересам производителей устройств было обеспечение их совместимости с веб-сайтами, которые предшествовали появлению таких устройств на 5-10 лет.

И если нет, это их проблема.

Ответ 4

Я подхожу к проблеме под другим углом. Имейте макет жидкости, но дайте ему минимальную ширину (а не максимальную ширину). Вы можете добиться этого с помощью CSS.

Проблема с изображениями не такая большая. Вы делаете следующее:

• Загрузите изображение с максимальным размером, который вы ожидаете.

• Сделайте изображение жидким следующим образом:

  <img src="http://example.png" style="width:32.5%">

При изменении размера страницы изображение будет изменяться по размеру в процентах. Просто убедитесь, что в изображении нет атрибутов ширины или высоты. Я называю это сверхслабым:)

Ответ 5

Макеты жидкостей были ответом перед тем, как Отзывчивый дизайн в браузерах вышел. Не нужно больше использовать жидкие или эластичные макеты.

• http://lessframework.com/
• https://github.com/thatcoolguy/gridless-boilerplate

Ответ 6

Нет правильного ответа на этот вопрос, поскольку никакие две цели дизайна никогда не похожи. Макеты жидкостей делают любое подобие типографского контроля практически невозможным, но не все конструкции нуждаются или хотят его.

Никакая коллекция "лучших практик" никогда не будет соответствовать фактическому дизайнерскому образованию, и не все пользователи будут вынуждены взорвать их окна браузера, чтобы заполнить весь экран.

Ответ 7

Наиболее информативное обсуждение макетов, которые я прочитал до сих пор, находится в книге "Мастерство CSS" Энди Бад. Если у вас есть шанс, прочитайте его. Я думаю, что у него должна быть книга по CSS (средний уровень). Похоже, что глава макетов доступна в форме статьи здесь. http://www.webreference.com/authoring/style/sheets/css_mastery2/

Другая ссылка: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Жидкость и жидкость - это два разных имени для той же техники.

НТН.

Ответ 8

Я думаю, что лучше иметь максимальную ширину макета, вы можете изменить это с помощью Javascript. Хорошим примером этого является этот макет, посмотрите, что происходит (в Firebug или что-то еще) с макетом, если вы измените ширину: http://tweakers.net/ Они выбрали ширину 1208 пикселей и уменьшили ее с помощью Javascript при изменении ширины браузера. С отключенным Javascript сайт по-прежнему имеет ширину 1208 пикселей, что, похоже, не является проблемой.

EDIT: Первая ширина сайта будет равна 900px. С помощью Javascript вы проверите ширину браузера, и вы дадите класс с самым близким разрешением к ширине вашего браузера. Например: ширина браузера составляет 1100 пикселей, поэтому вы даете класс "res1024" или ширина браузера 1080px, тогда вы даете класс "res1100". Это будет ваш CSS:

#wrapper {
    width: 900px;
}
.res1024 #wrapper {
    width: 1000px;
}

.res1100 #wrapper {
    width: 1080px;
}

Надеюсь, это вам поможет:], вы можете, конечно, изменить этот класс тела намного больше, например:

.res900 #menu {
     width: 100px;
}

ИЗМЕНИТЬ 2: Вы можете обрабатывать изображения одинаково:

.res900 img.fluid {
    width: 200px;
}

.res1100 img.fluid {
    width: 300px;
}