Медиа-запросы CSS: основы работы
Медиа-запросы – это очень мощный способ настройки стилей в соответствии с такими факторами, как тип используемого устройства, размер области просмотра, плотность пикселей на экране и даже ориентация устройства. Поскольку медиа-запросы существуют уже довольно давно, вы, вероятно, уже знакомы с их основным синтаксисом и использованием. Поэтому в данном мануале мы постараемся кратко и понятно объяснить основы их работы, а также покажем несколько трюков, о которых вы не знали.
Основные медиа-запросы
Медиа-запросы определяются с помощью правила @media, за которым указывается тип и функции медиа. Доступные типы медиа: all, print, screen и speech (если тип не указан, по умолчанию подразумевается all). Одновременно можно использовать несколько типов, в таком случае их разделяют запятыми:
@media screen, print < /* Styles for screen and print devices */ >
Примечание: Такие типы медиа, как tv или projection, устарели с выходом Media Queries level 4.
Что касается медиа-функций, они определяются в скобках. Вы можете протестировать широкий спектр функций. Некоторые из наиболее популярных — это width, height, aspect-ratio, orientation и resolution. Многие из этих популярных функций являются функциями диапазона, поэтому они также имеют минимальную и максимальную версии (то есть min-width, max-width, min-aspect-ratio, max-aspect-ratio и т.п.)
В следующем простом примере цвет фона по умолчанию — ярко-розовый, но экранные устройства с шириной области просмотра 650 пикселей или меньше вместо него будут отображать цвет rebeccapurple:
body < background: hotpink; >@media screen and (max-width: 650px) < body < background: rebeccapurple; >>
Обратите внимание, при указании типа и функции медиа между ними нужно использовать логический оператор and.
Вот еще несколько примеров простых медиа-запросов, которые указывают либо тип медиа, либо медиа-функцию, либо и то, и другое:
@media print < /* styles for print media only */ >@media (max-width: 65rem) < /* styles for any device that has a display width of 65rem or less */ >@media screen and (min-width: 800px) < /* styles for screen viewports that have a width of 800px or more */ >
Несколько медиа-функций
Вы можете указать несколько медиа-функций, если того требует ваш запрос. Для этого между функциями используется логический оператор and. При использовании and запрос будет выполнен только в том случае, если все функции оцениваются как истинные. Например, очень часто макеты настраиваются на несколько разных диапазонов ширины области просмотра:
/* Extra-small */ @media screen and (max-width: 360px) < /* . */ >/* Small */ @media screen and (min-width: 361px) and (max-width: 480px) < /* . */ >/* Medium-only */ @media screen and (min-width: 481px) and (max-width: 960px) < /* . */ >/* . */
Логический оператор or и запятые
Также можно определить несколько запросов и разделить их запятыми. В этом случае запятые действуют как логические операторы or, и запрос становится по сути списком запросов. Медиа-запрос будет применяться, если какой-либо из перечисленных запросов отвечает шаблону.
В следующем примере медиа-запрос будет истинным, если устройство имеет портретную ориентацию или если окно просмотра устройства имеет минимальную ширину 3rem и максимальное соотношение сторон 2/1:
@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) < /* . */ >
Логический оператор not
Вы можете использовать логический оператор not в начале запроса, чтобы изменить истинность всего запроса. Оператор not полезен для применения стилей, когда определенные условия не выполняются браузером или устройством. В следующем примере медиа-запрос будет применяться, когда основное указывающее устройство не может наводить курсор на элементы:
@media not screen and (hover: hover) < /* . */ >
Примечание: Тип медиа нужно указывать обязательно. Кроме того, not меняет не весь список запросов (запросы, разделенные запятыми), а только один запрос.
Логический оператор only
Логический оператор only особенный – он скрывает весь запрос для старых браузеров. Другими словами, старые браузеры не понимают ключевое слово only, поэтому игнорируют весь медиа-запрос. Иначе ключевое слово only не действует.
@media only all and (min-width: 320px) and (max-width: 480px) < /* ignored by older browsers */ >
Примечание: Как и в случае с оператором not, при использовании only тип носителя является обязательным. Обратите внимание, что устаревшие браузеры, которые не поддерживают Media Queries level 3, сейчас встречаются редко, поэтому в большинстве случаев only можно не использовать.
Дополнения из Media Queries Level 4
В последнем выпуске спецификации Media Queries Level 4 появилось довольно много новых медиа-функций, которые можно протестировать:
- pointer: определяет, есть ли у вас первичное указывающее устройство (none, coarse и fine).
- any-pointer: определяет, доступно ли какое-либо указывающее устройство (none, coarse и fine).
- hover: определяет, может ли основное указывающее устройство наводить курсор на элементы (none или hover).
- any-hover: определяет, может ли любое из доступных указывающих устройств наводиться на элементы (none или hover).
- color-gamut: диапазон доступных цветов (srgb, p3 или rec2020).
- overflow-inline: способ обработки потенциального переполнения на внутренней оси (none, paged, optional-paged или scroll).
- overflow-block: способ обработки потенциального переполнения на оси блока (none, paged, optional-paged или scroll).
- update: частота, с которой может обновляться макет (none, slow или fast).
Медиа-запросы для дисплеев Retina
За последние несколько лет наблюдается распространение устройств с дисплеями с более высокой плотностью пикселей. Определенные аспекты дизайна для устройств с более высокой плотностью пикселей можно определять иначе. К примеру, можно использовать определенную графику с высоким разрешением.
Чтобы добиться этого, используют медиа-функцию с минимальным разрешением со значением 192 dpi. Однако функция resolution поддерживается не всеми браузерами, и для более надежного подхода можно также добавить дополнительную нестандартную функцию -webkit-min-device-pixel-ratio со значением 2:
@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) < /* . */ >
Проверить поддержку медиа-функции в браузерах можно на Can I Use.
Ниже вы найдете несколько очень полезных ресурсов, связанных с медиа-запросами:
- Медиа-запросы CSS-Tricks для стандартных устройств
- MQTest.io позволяет проверить, на какие мультимедийные функции реагирует ваше устройство.
- Страничка MDN по доступным медиа-функциям.
2.26. CSS3-медиазапросы
В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.
Кроме того, было введено ключевое слово all , которое использовалось, чтобы указать, что таблица стилей применяется ко всем типам носителей.
В HTML4 медиа-запрос записывался следующим образом:
Внутри таблицы стилей также можно было объявить, что блоки объявлений должны применяться к определенным типам носителей:
@media screen < * >Предусматривая возможность введения новых значений и значений с параметрами в будущем, для браузеров была реализована поддержка значений атрибута медиа-носителя, указанных следующим образом:
Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.
Медиазапросы, характеристики устройств и разрешения экрана
- Содержание:
- 1. Что такое медиа-запрос
- 2. Логические операторы
- 3. Тип носителя
- 4. Характеристики носителя
- 5. Метатег viewport
- 6. На какие разрешения экрана нужно ориентироваться
- 7. Стратегии использования медиа-запросов
Поддержка браузерами
IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0
1. Что такое медиа-запрос
В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width . Медиа-запрос является логическим выражением, которое возвращает истину или ложь.
Медиа-запросы могут быть добавлены следующими способами:
1) С помощью HTML:
2) С помощью правила @import внутри элемента или внешней таблицы стилей:
@import url(color.css) screen and (color);3) Непосредственно в коде страницы:
4) Внутри таблицы стилей style.css:
@media (max-width: 600px) < #sidebar >Таблица стилей, прикрепленная через тег , будет загружаться вместе с документом, даже если её медиа-запрос вернет ложь.
Для поддержки медиа-запросов в старых браузерах можно воспользоваться JavaScript-библиотекой css3-mediaqueries.js , доступную по адресу https://code.google.com/archive/p/css3-mediaqueries-js/.
2. Логические операторы
С помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться соответствие нескольким условиям.
2.1. Оператор and
Оператор and связывает друг с другом разные условия:
@media screen and (max-width: 600px) < /* CSS-стили */; >Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px .
@media (min-width: 600px) and (max-width: 800px) < /* CSS-стили */; >Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.
Правило @media all and (max-width: 600px) <. >равнозначно правилу @media (max-width: 600px) <. >.
2.2. Оператор запятая
Оператор запятая работает по аналогии с логическим оператором or .
@media screen, projection < /* CSS-стили */; >В данном случае CSS-стили, заключенные в фигурные скобки, сработают только для экранных или проекционных устройств.
2.3. Оператор not
Оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос
@media not all and (monochrome)
будет эквивалентен запросу
@media not (all and (monochrome))
Если медиазапрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос
@media not screen and (color), print and (color)будет эквивалентен запросу
@media (not (screen and (color))), print and (color)2.4. Оператор only
Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).
media="only screen and (min-width: 401px) and (max-width: 600px)"Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media=»only» . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.
3. Тип носителя
Тип носителя представляет собой тип устройства, например, принтеры, экраны.
| Значение | Описание |
|---|---|
| all | Подходит для всех типов устройств. |
| Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати. | |
| screen | Предназначен в первую очередь для экранов цветных компьютерных мониторов. |
| speech | Предназначен для синтезаторов речи. |
CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.
4. Характеристики носителя
К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.
| Параметр | Описание |
|---|---|
| width | Проверяет ширину области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (width: 800px) . Обычно для проверки используются минимальные и максимальные значения ширины. min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе. |
| height | Проверяет высоту области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (height: 500px) . Обычно для проверки используются минимальные и максимальные значения высоты. min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе. |
| aspect-ratio | Проверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как (aspect-ratio: 16/9) . min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра. |
| orientation | Проверяет ориентацию области просмотра. Принимает два значения: (orientation: portrait) и (orientation: landscape) . |
| resolution | Проверяет разрешение экрана (количество пикселей). Значения также могут проверять количество точек на дюйм (dpi) или количество точек на сантиметр (dpcm), например, (resolution: 300dpi) . min-resolution проверяет минимальное разрешение экрана, max-resolution — максимальное. |
device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.
5. Метатег viewport
Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.
Страницы, адаптированные для просмотра на разных типах устройств, должны содержать в разделе метатег viewport .
Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства. Другими словами, width отражает значение document.documentElement.clientWidth , а device-width — screen.width .
При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.
6. На какие размеры экрана нужно ориентироваться
При составлении медиазапросов нужно ориентироваться на так называемые переломные (контрольные) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.
/* Smartphones (вертикальная и горизонтальная ориентация) ----------- */ @media only screen and (min-width : 320px) and (max-width : 480px) < /* стили */ >/* Smartphones (горизонтальная) ----------- */ @media only screen and (min-width: 321px) < /* стили */ >/* Smartphones (вертикальная) ----------- */ @media only screen and (max-width: 320px) < /* стили */ >/* iPads (вертикальная и горизонтальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) < /* стили */ >/* iPads (горизонтальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) < /* стили */ >/* iPads (вертикальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) < /* стили */ >/* iPad 3**********/ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) < /* стили */ >/* Настольные компьютеры и ноутбуки ----------- */ @media only screen and (min-width: 1224px) < /* стили */ >/* Большие экраны ----------- */ @media only screen and (min-width: 1824px) < /* стили */ >/* iPhone 4 ----------- */ @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) < /* стили */ >/* iPhone 5 ----------- */ @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) < /* стили */ >/* iPhone 6 ----------- */ @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) < /* стили */ >/* iPhone 6+ ----------- */ @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) < /* стили */ >/* Samsung Galaxy S3 ----------- */ @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) < /* стили */ >/* Samsung Galaxy S4 ----------- */ @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) < /* стили */ >@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) < /* стили */ >/* Samsung Galaxy S5 ----------- */ @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) < /* стили */ >@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)< /* стили */ >Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.
7. Стратегии использования медиа-запросов
Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.
Медиа-запросы
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселей и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.
Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| Принтеры и другие печатающие устройства. | |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
Следующие типы являются корректными, но устаревшими и не дают никакого результата (табл. 2).
| Тип | Описание |
|---|---|
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Наладонные компьютеры и аналогичные им аппараты. |
| projection | Проекторы. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Логические операторы, применяемые в медиа-запросах
and
Логическое И. Указывается для объединения нескольких условий.
Пример. Стиль для всех цветных устройств
@media all and (color)
not
Логическое НЕ. Указывается для отрицания условия.
Пример. Стиль для всех устройств кроме принтера
@media all and (not print)
Оператор not оценивается в запросе последним, поэтому выражение
@media not all and (color)
следует понимать как
@media not (all and (color))
@media (not all) and (color)
only
Применяется для старых браузеров, которые не поддерживают медиа-запросы. Старые браузеры считают ключевое слово only типом носителя, но поскольку такого типа не существует, то игнорируют весь стиль целиком. Современные браузеры воспринимают запись с only и без него одинаково.
Пример. Стиль для новых браузеров
@media only all and (not print)
В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.
Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселей.
@media all and (orientation: landscape), all and (min-width: 480px)
Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.
Медиа-функции
Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселей, а min-width: 1000px , наоборот, сообщает, что ширина окна больше 1000 пикселей.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Тип носителя: print, screen
Значение: целое число/целое число
Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
color (min-color, max-color)
Тип носителя: print, screen
Значение: целое число
Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.
@media screen and (color) < /* Для цветных экранов */ body < background: #fc0; >> @media screen and (min-color:3) < /* Минимум 512 цветов */ body < background: #ccc; >>color-index (min-color-index, max-color-index)
Тип носителя: print, screen
Значение: целое число
Определяет количество цветов, которое поддерживает устройство. В примере ниже показан стиль для экранов отображающих не меньше 256 цветов.
@media all and (min-color-index: 256)
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Тип носителя: print, screen
Значение: целое число/целое число
Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере ниже показано, как установить стиль для экранов с соотношением сторон 16:9 и более.
@media screen and (min-device-aspect-ratio: 16/9)
device-height (min-device-height, max-device-height)
Тип носителя: print, screen
Значение: размер
Определяет всю доступную высоту экрана устройства или печатной страницы.
device-width (min-device-width, max-device-width)
Тип носителя: print, screen
Значение: размер
Определяет всю доступную ширину экрана устройства или печатной страницы. В примере ниже в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселей ширина макета задаётся как 1100px.
Ширина макета Диабаз, формируя аномальные геохимические ряды, сменяет известняк, образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов. grid
Тип носителя: print, screen
Значение: нет
Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
Если вам требуется форматировать текст, не указывайте его размер в пикселях, для подобных устройств используется единица em.
Стиль для бабушкофона Привет! Как дела? Как сажа бела?
height (min-height, max-height)
Тип носителя: print, screen
Значение: размер
Высота отображаемой области.
monochrome (min-monochrome, max-monochrome)
Тип носителя: print, screen
Значение: целое число
Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксель. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В данном примере показан стиль для монохромного и цветного принтера.
@media print and (monochrome) < body < font-family: Times, 'Times New Roman', serif; >
h1, h2, p < color: black; >> @media print and (color) < body < font-family: Arial, Verdana, sans-serif; >
h1, h2, p < color: #556b2f; >> orientation
Тип носителя: print, screen
Значение: landscape | portrait
Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
В данном примере устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).
@media screen and (orientation: landscape) < #logo < background: url(logo1.png) no-repeat; >> @media screen and (orientation: portrait) < #logo < background: url(logo2.png) no-repeat; >> resolution (min-resolution, max-resolution)
Тип носителя: print, screen
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)
Определяет разрешение устройства, например, принтера. В примере ниже стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.
@media print and (min-resolution: 300dpi)
scan
Тип носителя: tv
Значение: interlace | progressive
Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.
width (min-width, max-width)
Тип носителя: print, screen
Значение: размер
Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В данном примере при уменьшении окна до 600 пикселей и меньше меняется цвет фона веб-страницы.
Ширина страницы Пока магма остается в камере, мусковит сингонально поднимает шток, в то время как значения максимумов изменяются в широких пределах.
Спецификация
| Спецификация | Статус |
|---|---|
| Media Queries Level 4 | Рабочий проект |
| Media Queries Level 3 | Рекомендация |
| CSS Level 2 (Revision 1) | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 1 | 9.2 | 1.3 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
@media
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, монитор и др. В табл. 1 перечислены основные из них.
Следующие типы являются корректными, но устаревшими и не дают никакого результата (табл. 2).
| Тип | Описание |
|---|---|
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Наладонные компьютеры и аналогичные им аппараты. |
| projection | Проекторы. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Синтаксис
@media < >| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
После ключевого слова @media идёт один или несколько типов носителя, перечисленных в табл. 1; если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых пишутся стилевые правила.
Пример
@media Метод ловли льва в пустыне
Метод последовательного перебора
Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.
Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.
В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 1 и рис. 2.
Рис. 1. Страница для отображения в окне браузера
Рис. 2. Страница, предназначенная для печати
Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen , чтобы отобразить итог в браузере. Именно так был получен рис. 2.
Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться элементом с атрибутом media , значением которого выступают те же типы, перечисленные в табл. 1.
@media .
В данном примере используются две таблицы стилей, одна для отображения в браузере, а вторая — для печати документа. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определённых устройств.
Спецификация
| Спецификация | Статус |
|---|---|
| Media Queries Level 4 | Рабочий проект |
| Media Queries Level 3 | Рабочий проект |
| CSS Level 2 (Revision 1) | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 1 | 9.2 | 1.3 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.