Использование CSS-медиазапросов для создания динамичных веб-сайтов

Единый дизайн для экранов всех размеров

На смену статичным веб-сайтам с фиксированной шириной окна быстро приходит динамичный "текучий" дизайн, который масштабируется в сторону увеличения и в сторону уменьшения в соответствии с размерами конкретного экрана. Динамичный дизайн позволяет разработчику предоставить пользователю работоспособный интерфейс вне зависимости от того, с помощью какого устройства и какого экрана этот пользователь взаимодействует с веб-сайтом. Кроме того, динамичный дизайн обеспечивает веб-сайту "готовность к завтрашнему дню" благодаря адекватному реагированию на разнообразные размеры экранов, которые быстро меняются по мере выхода на рынок все новых смартфонов и планшетов. Основное средство реализации динамичного дизайна – это технология т.н. CSS-медиазапросов (CSS media queries). В этой статье рассказывается, как использовать медиазапросы при создании веб-сайтов, предназначенных для просмотра с ПК, мобильных телефонов и планшетов.

Джефф Бэйл, разработчик веб-приложений для мобильных устройств, независимый специалист

Photo of Jeff BailДжефф Бейл (Jeff Bail) имеет опыт создания веб-сайтов и веб-приложений для компаний из перечня Fortune 500, для государственных организаций США и для развивающихся компаний из самых различных отраслей — от страховых агентств и учебных заведений до медицинских и оздоровительных учреждений. В последнее время Дж. Бейл разрабатывает для платформ iPhone и Android мобильные веб-приложения, которые предоставляют полезные функции миллионам участников сообщества MapMyFITNESS, объединяющего энтузиастов фитнеса.



26.06.2013

Введение

С каждым днем на рынок выходит все больше телефонов и планшетов. Потребители используют разнообразные устройств всевозможных размеров и форм, однако это ставит перед разработчиками веб-сайтов сложные проблемы: Как сделать так, чтобы веб-сайт выглядел хорошо не только в традиционных браузерах, но и в браузерах мобильных и планшетных устройств? Как предоставить пользователям первоклассные возможности для всего разнообразия размеров экрана? Ответ — применить динамичный дизайн. Динамичный дизайн меняется в соответствии с размерами экрана, на который осуществляется отображение. Основной способ реализации динамичного дизайна — использование технологии CSS media queries (CSS-медиазапросы).

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

Предварительные условия

Примеры программного кода в этой статье предназначены для исполнения в веб-браузерах, которые поддерживают технологию CSS media queries, в том числе в браузерах Mozilla Firefox, Apple Safari, Google Chrome и Opera. В разделе Ресурсы приведена ссылка на полный список браузеров для ПК и мобильных устройств, поддерживающих технологию CSS3 media queries.


Динамичный дизайн

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

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

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


Медиазапросы

Поддержка различных носителей для вывода информации была реализована в CSS посредством медиатипов начиная с версии CSS2. Если вы когда-либо делали таблицу стилей для печати, то уже использовали медиатипы. Соответствующий пример показан в листинге 1.

Листинг 1. Использование медиатипов
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

В листинге 1 атрибут media задает таблицу стилей, которые следует использовать для каждого типа носителя информации:

  • Стиль screen предназначен для экранов цветных компьютерных мониторов.
  • Стиль print предназначен для контента, который демонстрируется в режиме предварительного просмотра или печатается на принтере.

Медиазапросы, введенные в спецификации CSS3 (CSS version 3), расширяют функции медиатипов и допускают применение в таблицах стилей более точных правил отображения. Медиазапрос (Media query)— это выражение, которое может иметь значение True (истина) или False (ложь). В случае значения True содержащиеся в этом выражении стили будут использоваться, в случае значения False — не будут. Эта простая логика — которая благодаря использованию выражений приобретает весьма мощные возможности — обеспечивает разработчику дополнительную гибкость благодаря применению специальных правил отображения для сценариев конкретного дизайна.

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

Листинг 2. Правило медиазапроса
@media all and (min-width: 800px) { ... }

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

  • @media all— медиатип, который в данном случае диктует применение данного CSS-кода ко всем медиатипам.
  • (min-width:800px)— выражение, содержащее медиазапрос, который дает указание браузеру применять следующий CSS-код только в том случае, если минимальная ширина экрана этого браузера составляет 800 пикселей.

Обратите внимание, что в листинге 2 ключевые слова all и and могут быть пропущены. Если медиазапрос применяется ко всем медиатипам, то слово all может быть пропущено. Завершающее слово and также является необязательным. После переписывания этого медиазапроса с использованием краткого синтаксиса он будет выглядеть следующим образом (см. листинг 3).

Листинг 3. Краткий синтаксис
@media (min-width:800px) { ... }

Медиазапросы могут содержать и сложные выражения. Например, если вы хотите создать стиль, который будет применяться только в том случае, когда минимальная ширина составляет 800 пикселей, а максимальная ширина — 1200 пикселей, то это можно сделать с помощью правила, показанного в листинге 4.

Листинг 4. Сложное выражение
@media (min-width:800px) and (max-width:1200px) { ... }

В своем выражении вы можете использовать любое количество условий and. К примеру, если вы хотите добавить другое условие, осуществляющее проверку портретной ориентации экрана, вам достаточно добавить еще одно ключевое слово and (и), за которым будет следовать дополнительный медиазапрос orientation (см. листинг 5).

Листинг 5. Использование ключевого слова and
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

Медиазапрос в листинге 5 активируется только в том случае, если минимальная ширина составляет 800 пикселей, максимальная ширина составляет 1200 пикселей, а ориентация является портретной (обычно ориентация имеет смысл только для смартфонов и планшетов, которые несложно повернуть из портретного режима в альбомный и наоборот). Если какое-либо из этих условий будет иметь значение False, то данное правило медиазапроса не будет применено.

Антонимом ключевого слова and является ключевое слово or (или). Подобно слову and, оно группирует условия в сложное выраже. Выражение с ключевым словом or, разделяющим два условия, будет иметь значение True, если хотя бы одно из этих условий имеет значение True (см. листинг 6).

Листинг 6. Ключевое слово or
@media (min-width:800px) or (orientation:portrait) { ... }

Данное правило будет применено в том случае, если ширина будет не менее 800 пикселей или если ориентация будет портретной.

Еще одним полезным ключевым словом медиазапросов в вашем арсенале является слово not. Будучи помещенным в начало медиазапроса, слово not инвертирует результат. Другими словами, если без ключевого слова not какой-либо запрос имел значение True, то теперь он будет иметь значение False. Соответствующий пример показан в листинге 7.

Листинг 7. Использование ключевого слова not
@media (not min-width:800px) { ... }

Код в листинге 7 означает, что если минимальная ширина не равна 800 пикселям, то применяются следующие правила CSS. В приведенных примерах в качестве единицы измерения в медиазапросе используют только пиксели, однако вы не ограничены лишь пикселями. Вы можете использовать любую допустимую в CSS единицу измерения, в т. ч. сантиметры (см), дюймы (в), миллиметры (мм) и т. д.


Полезные медиафункции

Имеется несколько медиафункций, в том числе width, color и grid, которые можно использовать в медиазапросах. В данной статье не описываются все возможные медиафункции. Полный список этих функций содержится в документации организации World Wide Web Consortium (W3C) по медиазапросам (см. раздел Ресурсы).

Для проектирования динамичных веб-сайтов достаточно знать лишь несколько медиафункций: orientation (ориентация), width (ширина) и height (высота). Orientation – это простая медиафункция, которая может иметь значение portrait или landscape. Эти значения соответствуют положению телефона или планшета в руке пользователя, что позволяет разработчику оптимизировать контент для обоих вышеуказанных формфакторов. Считается, что экран находится в портретном режиме, если высота превышает длину, и в альбомном режиме, если ширина больше высоты. В листинге 8 показан пример использования функции orientation.

Листинг 8. Медиазапрос с функцией orientation
@media (orientation:portrait) { ... }

Функции height и width ведут себя аналогично; обе допускают использование префиксов min- и max-. В листинге 9 показан правильно построенный медиазапрос с использованием этих функций.

Листинг 9. Медиазапрос с функциями height и width
@media (min-width:800px) and (min-height:400px) { ... }

Медиафункции width и height можно использовать без префикса min- или max- (см. листинг 10).

Листинг 10. Медиафункции без префиксов min- и max-
@media (width:800px) and (height:400px) { ... }

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

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


Распространенные медиазапросы

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

Медиазапрос для смартфона в альбомном режиме: @media (min-width: 321px) { ... }

Медиазапрос для смартфона в портретном режиме: @media (max-width: 320px) { ... }

Медиазапрос для Apple iPad в альбомном режиме: @media (orientation: landscape) { ... }

Медиазапрос для iPad в альбомном режиме: @media (orientation: portrait) { ... }

Обратите внимание на использование медиафункции orientation для iPad и на использование медиафункции width для Apple iPhone. Это объясняется следующим обстоятельством. К сожалению, iPhone не поддерживает медиафункцию orientation. Для имитации определения ориентации необходимо использовать функцию width. Для получения дополнительной информации о наиболее употребительных медиазапросах обратитесь к разделу Ресурсы.


Медиазапросы в SASS

Поддержка технологии SASS (Syntactically Awesome Style Sheets) встроена в инфраструктуру Ruby on Rails, что способствует популярности SASS и ее все более широкому распространению в сообществе веб-разработчиков. Детальное рассмотрение SASS выходит за рамки данной статьи, я лишь изложу основы использования медиазапросов в таблицах стилей на базе SASS. Для получения дополнительной информации о SASS обратитесь к разделу Ресурсы.

Медиазапросы в SASS-коде ведут себя точно так же, как в обычном CSS-коде, с одним исключением: они могут быть вложены в другие CSS-правила. Если медиазапрос вложен в другое CSS-правило, он помещает это правило в верхний уровень таблицы стилей (см. листинг 11).

Листинг 11. Вложенный медиазапрос
#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

В результате компиляции примера в листинге 11 получится код, показанный в листинге 12.

Листинг 12. Результат компиляции
#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

Организация медиазапросов

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

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

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

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


Поддержка веб-браузерами

К настоящему времени вы, вероятно, уже убедились в том, что CSS-медиазапросы являются отличным инструментом, и вас интересует, какие браузеры поддерживают этот инструмент. Здесь есть и хорошие, и плохие новости.

  • Хорошая новость состоит в том, что большинство современных браузеров (включая браузеры для смартфонов) поддерживает CSS-медиазапросы.
  • Плохая новость состоит в том, что в Microsoft Windows® Internet Explorer® версии 8 поддержка медиазапросов все еще отсутствует.

С точки зрения большинства профессиональных веб-разработчиков это означает, что для поддержки медиазапросов в Internet Explorer м необходимо специальное решение. Ниже описывается одно из таких решений под названием respond.js, которое представляет собой т.н. polyfill-скрипт на базе JavaScript.

Реализация polyfill-скрипта с помощью respond.js

Respond.js — это небольшая JavaScript-библиотека, которая расширяет возможности веб-браузеров и поддерживает CSS-медиазапросы в тех браузерах, где отсутствует их нативная поддержка. Polyfill-скрипт циклически проходит по всему CSS-коду, на который ссылается данная страница, и анализирует CSS-правила, использующие медиазапросы. Затем этот скрипт отслеживает изменения ширины в браузере, добавляя и удаляя стили в соответствии с CSS-медиазапросом. Тем самым обеспечивается работа CSS-медиазапросов в браузерах, не имеющих их встроенной поддержки.

Это решение базируется на JavaScript, поэтому для работы polyfill-скрипта в браузере должна быть активирована технология JavaScript. Этот скрипт предназначен лишь для поддержки медиазапросов, в которых фигурируют минимальные или максимальные значения width, что требуется для создания динамичных дизайнов. Он не обеспечивает полномасштабной замены всех возможных CSS-медиазапросов. За дополнительной информацией о функциях и ограничениях этого скрипта обратитесь к разделу Ресурсы.

Respond.js — это один из множества доступных polyfill-скриптов с открытым исходным кодом для поддержки медиазапросов. Если respond.js не удовлетворяет ваши потребности, будет несложно найти альтернативные варианты.


Заключение

С помощью CSS-медиазапросов вы можете с легкостью адаптировать свои разработки к экранам разных размеров и предоставлять пользователям надлежащие возможности вне зависимости от того, какие браузеры или какие устройства они используют для посещения вашего веб-сайта. Эта технология лежит в основе динамичного дизайна — перспективной практики веб-дизайна и разработки для мобильных устройств. Попытка использования медиазапросов на вашем веб-сайте не требует никаких серьезных затрат, кроме простого совершенствования существующих CSS-файлов, так что почему бы не попробовать? Посетители вашего веб-сайта, просматривающие его с помощью планшетов, телефонов и устройств для чтения электронных книг, будут вам благодарны.

Ресурсы

Научиться

Получить продукты и технологии

  • Respond.js: Официальная страница проекта Respond.js на сайте Github.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Мобильные приложения
ArticleID=935410
ArticleTitle=Использование CSS-медиазапросов для создания динамичных веб-сайтов
publish-date=06262013