Адаптивная разметка

Marc van den Dobbelsteen, 13 апреля 2007

Создание резиновых разметок с помощью CSS хорошо зарекомендовало себя при ширине экрана от 800 до 1024 пикселей, но поскольку все более широкий круг устройств используется для доступа к веб, нам нужно более мощное и гибкое средство подстройки разметки под пользователя. Если мы хотим, чтобы сайт отображался с помощью устройств с экраном от 240 до 1680 пикселей и разрешением от 72 до 150 пикселей на дюйм – нам нужен действительно новый метод.

Что не так с резиновой разметкой?

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

Тогда почему бы нам не сделать разные разметки для нескольких диапазонов размера экрана, а потом автоматически выбирать наиболее подходящую.

Адаптивная разметка решит наши проблемы

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

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

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

Диапазоны размера экрана

Устройство	Размер экрана	Разметка
PDA Вертикальный экран	< 240 px
PDA Горизонтальный экран	240-320 px
Set top / Телевизор	320-640 px
Старые CRT мониторы	640-800 px
Распространенные TFT мониторы	800 – 1024 px
Широкоэкранные мониторы	1024 – 1280 px
Супер-широкоэкранные мониторы	> 1280 px

Замена классов

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

JavaScript наш помощник

Чтобы определить размер экрана, мы используем небольшой скрипт, который выполняется при событии onresize. В зависимости от полученного результата будет выбираться соответствующий класс и с помощью DOM добавляться к элементу body. В случае если JavaScript отключен мы получаем обычную резиновую разметку.

Обратите внимание, что различные браузеры используют различные модели событий, например в IE6 событие onresize возникает постоянно при изменении размеров окна браузера, а в FF только когда изменение размеров окна закончено.

Прогрессивное сжатие контента

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

Что дальше

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

Вывод

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

Альтернативные методы

Техника, которая была представлена, разработана независимо, но существует множество похожих техник, например Ричард Руттер собрал серию похожих техник³ на Clagnut⁴, а Кевин Хол представил технику, которая дает похожий результат, при немного другом подходе на Particletree⁵. Энди Кларк и Джеймс Эдвардс были пионерами в этой области и их статья Переключатель стилей⁶ способствовала популяризации использования классов элемента body для изменения разметки.