Что такое жидкий макет?

«Жидкий» макет - это макет сайта, который расширяется до заполнения всей доступной области по мере изменения размера окна браузера. Обычно это делается с помощью CSS. Жидкие макеты могут быть весьма полезны для определенных типов сайтов, но они также требуют значительно больших усилий, чем макеты с фиксированной шириной, и их полезность зависит от содержимого сайта и от того, насколько хорошо они реализованы.

Жидкие макеты относятся к концепции дизайна веб-сайта. Жидкий макет будет перемещаться внутрь и наружу при изменении размера окна браузера из-за того, что в CSS указаны проценты и относительная ширина.

От http://www.maxdesign.com.au/presentation/liquid/:

All containers on the page have their widths defined in percents - meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window.

Это просто означает, что он будет сжиматься / расширяться, чтобы заполнить размер окна браузера (обычно ширину) до определенного момента, если все сделано хорошо. В противном случае текст будет трудно читать на больших (24 дюйма +) мониторах.

По сути, это макет веб-страницы, который не зависит от конкретных спецификаций ширины элементов на странице.

См. Обсуждение на Википедия.

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

Один из двух:

• Дизайн будет масштабироваться до ширины браузера (например, если браузер был шириной 1024 пикселей, то и дизайн будет таким же) ... хотя это действительно приносит удовольствие при разработке для браузеров шириной 100 пикселей (иногда дизайнеры фактически устанавливают минимальная ширина).

• Дизайн имеет фиксированную ширину, но задается в измерении с использованием относительного размера ... например, "em" ... так что при увеличении размера шрифта увеличивается ширина страницы.

Жидкий макет - это метод макета CSS, который определяет всю ширину в процентах, поэтому области страницы будут увеличиваться / уменьшаться при изменении размера области просмотра (окна браузера).

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

Я бы сказал, что жидкие макеты наиболее полезны для сайтов с большим объемом текста с довольно простой компоновкой столбцов. Вы также можете найти золотую середину с «эластичным» макетом, в котором есть как жидкие, так и фиксированные области.

В истинном макете Liquid ваш контент расширяется и сжимается, чтобы соответствовать окну браузера вашего пользователя осмысленным, расчетным и интеллектуальным способом. Так что это больше, чем просто установка ширины столбца и контейнера в процентах.

При правильном исполнении это может привести к повышению воспринимаемого качества. Сделано плохо, это кошмар юзабилити.

Going Liquid - это огромная головная боль. Боль того стоит, если тема / клиент / продукт (ы), для которых вы создаете сайт, имеют сильное визуальное качество для них (например, сайт с летними блокбастерами), требуют определенной подгонки и отделки или если они должны отображаться большие объемы данных.

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

Видеть это: http://www.time-tripper.com/uipatterns/Liquid_Layout