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

Вывод

Что дальше

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

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

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

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

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

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

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

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