Медиа-запросы
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 4.0+ | 3.6+ | 2.0+ | 2.0+ |
Краткая информация
Версии CSS
Описание
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.
Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
Синтаксис
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Смартфоны и аналогичные им аппараты. |
| Принтеры и другие печатающие устройства. | |
| projection | Проекторы. |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Логические операторы, применяемые в медиа-запросах
Логическое И. Указывается для объединения нескольких условий.
Пример. Стиль для всех цветных устройств
Логическое НЕ. Указывается для отрицания условия.
Пример. Стиль для всех устройств кроме смартфонов
Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение
следует понимать как
Применяется для старых браузеров, которые не поддерживают медиа-запросы.
Пример. Стиль для новых браузеров
В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.
Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.
Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.
Медиа-функции
Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
color (min-color, max-color)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.
Пример 1. Стиль для цветных устройств
color-index (min-color-index, max-color-index)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.
Пример 2. Цветной дисплей
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.
Пример 3. «Киношное» соотношение
device-height (min-device-height, max-device-height)
Тип носителя: все кроме speech
Значение: размер
Определяет всю доступную высоту экрана устройства или печатной страницы.
device-width (min-device-width, max-device-width)
Тип носителя: все кроме speech
Значение: размер
Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.
Пример 4. Ширина макета
HTML5 CSS3 IE Cr Op Sa Fx
Тип носителя: all
Значение: нет
Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).
Пример 5. Размер букв
HTML5 CSS3 IE Cr Op Sa Fx
height (min-height, max-height)
Тип носителя: все кроме speech
Значение: размер
Высота отображаемой области.
monochrome (min-monochrome, max-monochrome)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.
Пример 6. Стиль для принтера
orientation
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait
Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).
Пример 7. Использование ориентации устройства
resolution (min-resolution, max-resolution)
Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)
Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.
Пример 8. Разрешение принтера
Тип носителя: tv
Значение: interlace | progressive
Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.
width (min-width, max-width)
Тип носителя: все кроме speech
Значение: размер
Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.
Адаптивный дизайн на основе медиа-запросов
Уровень подготовки веб-мастера: средний/высокий
Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.
Мы стремимся повысить доступность наших продуктов, то есть предоставить всем пользователям оптимальные возможности для работы с ними. Перед нами стояла дилемма: создать специальные мобильные версии сайтов или адаптировать существующие сайты и новые проекты для просмотра как на настольных компьютерах, так и на мобильных устройствах. Создание двух версий сайта позволило бы нам оптимизировать каждую из них для конкретного оборудования, но использование одного общего сайта дает возможность сохранить канонический URL. При этом исключаются сложные переадресации и упрощается совместное использование веб-адресов. Удобство обслуживания является важным фактором, поэтому мы решили не создавать разные версии страниц, а начали обдумывать, как обеспечить выполнение следующих условий:
Реализация
Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами, в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.
Области просмотра
Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.
Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:
Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.
Важно, что если в качестве значения элемента width в метатеге viewport указывается device-width, это значение обновляется, если пользователь меняет ориентацию экрана смартфона или планшета. В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства:
В зависимости от того, как функционирует и выглядит ваш сайт на экранах различных устройств, может потребоваться использовать разные контрольные точки. Вы можете также использовать медиа-запрос для выбора определенной ориентации без учета соотношения размеров в пикселях, если эта функция поддерживается.
Изменяется расположение контента и масштаб изображений – Институт культуры
Пример использования медиа-запросов
Недавно мы запустили новую версию страницы О Google. Чтобы пользователям устройств с небольшими экранами, такими как планшеты и смартфоны, было удобнее работать с этой страницей, кроме резинового макета мы добавили в ее код несколько медиа-запросов.
Вместо того чтобы нацеливаться на конкретные разрешения экранов, мы задали относительно широкий набор контрольных точек. Если разрешение экрана составляет более 1024 пикселей, страница отображается в своем первоначальном виде на сетке из 12 столбцов. Если оно составляет от 801 до 1024 пикселей, благодаря резиновому макету отображается слегка сжатая версия страницы.
Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:
Последний медиа-запрос предназначен для смартфонов:
С этого момента прекращается загрузка больших изображений; блоки контента размещаются один над другим. Мы также добавили дополнительные пробелы между элементами контента, чтобы более четко разграничить разделы.
Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств. 
Изменяется расположение контента, удалено большое изображение – О Google
Заключение
Важно понимать, что не существует простого решения, которое бы позволило сделать сайты удобными для просмотра на мобильных устройствах и устройствах с узкими экранами. Резиновые макеты хороши в качестве отправной точки, но их использование накладывает некоторые ограничения. Медиа-запросы также помогают оптимизировать сайты, но не следует забывать, что в 25% случаев при посещении сайтов используются компьютерные браузеры, которые еще не поддерживают данную технологию. Наличие таких запросов влияет на эффективность их работы. А если на сайте есть виджет, с которым удобно работать с помощью мыши, вовсе не факт, что он будет столь же удобен на сенсорном экране, где сложнее выполнять точные действия.
Крайне важно начинать тестирование на ранних этапах разработки и не прекращать его в дальнейшем. Просматривая свои сайты на смартфоне или планшете, вы не тратите время впустую. Если у вас нет возможности протестировать сайт на реальных устройствах, используйте Android SDK или iOS Simulator. Попросите знакомых и коллег зайти на сайт со своих устройств и понаблюдайте за его работой.
Оптимизация сайта для мобильных устройств позволит привлечь на него еще больше посетителей. Кроме того, изучение и разработка наилучших методов такой оптимизации открывает новые возможности для профессионального развития.
@media
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.2+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей. |
| handheld | Наладонные компьютеры и аналогичные им аппараты. |
| Печатающие устройства вроде принтера. | |
| projection | Проектор. |
| screen | Экран монитора. |
| tv | Телевизор. |
Синтаксис
Значения
После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 1; если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил.
XHTML 1.0 CSS2.1 IE Cr Op Sa Fx
В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 1 и рис. 2.
Рис. 1. Страница для отображения в окне браузера
Рис. 2. Страница, предназначенная для печати
HTML5 CSS2.1 IE Cr Op Sa Fx
В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств.
Адаптивная верстка. Директива @media в CSS (медиа-запросы)
Адаптивная верстка нужна в первую очередь для того, чтобы сайт правильно отображался на смартфонах. При адаптивной верстке в CSS прописываются необходимые параметры для разных размеров экранов. Например, можно для экранов шириной меньше 500px сделать маленький шрифт. Выглядит это так:
Как видите, всё очень просто. Сперва через директиву @media указывается для какого экрана буду написаны стили. В данном случае прописано, что максимальная ширина экрана 500px. И потом в фигурных скобках пишутся стили для нужных элементов. Эти стили будут подключаться, если ширина экрана будет меньше или равна 500px. То есть до 500px включительно.
Работу адаптивной верстки можно сразу проверять в браузере. Достаточно просто уменьшить браузер или воспользоваться инструментами разработчика. Посмотрите видео:
Как писать медиа-запросы в CSS (2 варианта)
Можно для одного экрана все стили поместить в одну директиву. А можно каждый раз указывать директиву. Вот примеры:
В первом примере все стили группируются по медиа-запросам. Во втором примере для каждого селектора сразу пишется медиа-запрос. И так одинаковых медиа-запросов может быть много. Для меня предпочтительным является первый пример, где стили группируются.
Адаптивная верстка на примере шапки сайта
Продемонстрирую адаптивную верстку на примере шапки нашего сайта. В первую очередь нужно в файле index.html в тег вставить следующую строку:
Затем в конец файла style.css вставить следующий код:
В остальном я просто подкорректировал размеры, отступы, размеры шрифтов, чтобы всё смотрелось корректно.
Теперь измените размеры браузера до 575px или поменьше, желательно через инструменты разработчика. Результат должен быть таким:
Остальная часть сайта конечно же «посыпалась», так как для других элементов стили не перезаписаны. Но шапку в порядок привели.
Весь код для адаптивной верстки приведу ниже, а сейчас еще о нескольких важных моментах.
Основные брейкпойнты для медиа-запросов в CSS
Существуют стандарты какими должны брейкпойнты в медиа-запросах: 575px, 767px, 991px и 1199px. В коде это выглядит так:
И в данном случае они так и должны располагаться — в порядке убывания. То есть, если вы сперва написали стили для больших экранов, то потом пишете стили для экранов поменьше, потом еще меньше и так до смартфонов.
Вот итоговые листинги кода с адаптивной версткой:
index.html:
style.css:
Начните зарабатывать версткой сайтов до 50 000 р./месяц уже через 5 дней
Советы по использованию media query
Вступление
В статье я собрал советы по использованию media query. Расскажу, как можно более эффективно использовать media query. В конце статьи есть список использованных источников.
Внешнее подключение media query
Браузеры, которые не поддерживают media query не будут загружать эти стили, но браузеры с поддержкой будут загружать все независимо от того необходимы они или нет.
Но все же есть одна особенность – браузер не загружает фоновые изображения, определенные в стилях которые в данный момент не используются.
test1.css
test2.css
В зависимости от размера экрана будет загружена одна фоновая картинка.
Больше чем просто размер viewport
Ширина viewport это не единственное что можно определить с помощью media query. Есть много других функций которые можно определить, в том числе: пропорции устройства, ориентацию, разрешение, плотность пикселей и более.
Многие из них очень полезны:
— pixel-density пригодится если вы хотите использовать фоновые картинки и иконки адаптированные для экранов с высокой плотностью пикселей.
— orientation определяет в портретном или ландшафтном режиме в данный момент устройство. Можно использовать для того что бы отключить фиксированное позиционирование некоторых элементов.
— height доступная высота, можно использовать для оптимизации чтобы контент отображался полностью без разрывов в одном экране.
Рекомендую обратится к документации за полным списком, думаю, что это поможет вам сделать ваш интерфейс более гибким.
Не только смартфоны
Вы замечали насколько некрасиво смотрятся некоторые сайты на современных больших мониторах? Первая ассоциация связанная с media query — это создание интерфейса только для смартфонов. Сочетание media query и multi column поможет отобразить ваш сайт красиво на больших мониторах.
Как часто вы используете такой breakpoint?
Инструмент для работы с media query
Существует множество плагинов для браузеров которые помогают разрабатывать адаптивный дизайн, но по моему опыту лучшим инструментом является Responsive Mode который был добавлен с 15 версией Firefox.
Выделяйте специфичное
Отсутствие media query, на самом деле и есть media query. Этот совет часть стратегии mobile-first, согласно которой. Вместо:
Лучше определить только специфичные, правила только там, где это необходимо:
В результате у нас получился простой и легкий в поддержке код. Также, такой код более подходит для старых мобильных браузеров которые не поддерживают media query.
Breakpoints когда и сколько?
Так исторически сложилось, что – breakpoints были привязаны к размерам популярных устройств. (iPhone = 320px портрет, 480px = iPhone пейзаж, и т.д. ). Но что мы видим сейчас — размеры устройств постоянно меняются, появляется все больше устройств с нестандартными размерами. Какой он, стандарт? Веб постоянно развивается, так что это наша работа, создавать интерфейсы, которые выглядят и работают прекрасно на любом экране.
Так где же расставить breakpoints и сколько их необходимо?
Позвольте контенту определить когда ставить breakpoint и сколько необходимо. Начните с маленького экрана, а затем расширяйте, пока не увидите что пора выставить breakpoint. Определяйте breakpoints под ваш дизайн, а не под конкретное устройство.
Второстепенные breakpoints
Иногда так случается, что не все элементы дизайна вписываются в определенные breakpoints. То есть происходят слишком глобальные изменения и тут есть два выхода: первый, не очень желательный, менять уже определенные breakpoints или менять дизайн; и второй, более прагматичный, определить второстепенные breakpoints в границах глобального breakpoint.
С одной стороны, это усложняет стили, но никто не говорит, что бы вы использовали второстепенные breakpoints для всех элементов. Используйте только там, где вам не хватает гибкости.
Относительные единицы измерения
Вместо использования фиксированных размеров, лучше использовать относительные единицы для определения breakpoints. На хабре уже многократно была раскрыта тема использования относительных размеров в верстке. Вот неполный список статей: здесь, здесь, здесь. Приведу лишь самый главный довод — это позволит браузерам изменять дизайн в зависимости от уровня установленного размера зума пользователем, в результате чего пользователь увидит более приятный, более доступный для просмотра сайт.
Условная загрузка
Условная загрузка — очень мощный инструмент, который позволяет выставить приоритеты для контента, повысить производительность. Суть этого приема заключается в том, что клиент сам решает какой контент загружать и в каком порядке. Допустим, вы загружаете картинки асинхронно, с помощью javascript, и вы используете адаптированные картинки для разных размеров экранов. Вопрос как javascript может узнать, какой именно контент, необходимо загружать в данный момент?
Для этого мы можем использовать matchMedia. matchMedia позволяет нашему javascript определить все свойства доступные через media query.
