CSS: Правило @media
CSS предоставляет способ отображения содержимого веб-страницы по разному, в зависимости от устройства, на котором оно просматривается, или разрешения экрана (размера области просмотра в браузере) без необходимости изменения самого содержимого. Медиа запросы состоят из выражения, которое ограничивает область действия таблицы стилей и самой таблицы стилей, размещаемой в фигурных скобках.
Синтаксис
@media тип_устройства and|not|only (медиа_особенности)
Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:
Типы устройств
| Тип | Описание |
|---|---|
| all | Используется для всех типов устройств. |
| aural | Используется для синтезаторов речи и звука. |
| braille | Используется для тактильной обратной связи устройств Брайля. |
| embossed | Используется для принтеров Брайля. |
| handheld | Используется для небольших или портативных устройств. |
| Используется для принтеров | |
| projection | Используется для презентаций, таких как слайды. |
| screen | Используется для экранов компьютеров, планшетов, смартфонов и т.д. |
| speech | Используется для речевых браузеров. |
| tty | Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы. |
| tv | Используется для телеэкранов. |
К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:
/* только для печати */ @media print < /* скрыть меню */ #navigation < display: none; >/* начинать каждую новую страницу с заголовка h1 */ h1 < page-break-before: always; >>
Особенности устройств для медиа запросов
| Особенность | Описание |
|---|---|
| aspect-ratio | Определяет соотношение ширины и высоты области просмотра. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max». |
| color | Определяет количество бит на цвет для устройства. Может иметь префикс «min» или «max». |
| color-index | Указывает количество цветов, которое устройство может отображать. Может иметь префикс «min» или «max». |
| device-aspect-ratio | Определяет соотношение ширины и высоты устройства вывода. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max». |
| device-height | Указывает высоту устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max». |
| device-width | Указывает ширину устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max». |
| grid | Определяет как устроен вывод у устройства: на основе сетки или точечный. Если устройство на основе сетки (например, терминал, телетайп или дисплей телефона, поддерживающий только один шрифт), то значение 1, в противном случае значением будет 0. |
| height | Указывает высоту области просмотра, например, окно браузера. Может иметь префикс «min» или «max». |
| monochrome | Указывает количесвто бит на пиксель для устройств с монохромными экранами. Может иметь префикс «min» или «max». |
| orientation | Указывает в каком режиме просмотра находится дисплей: ландшафтном (ширина дисплея больше, чем высота) или портретном (высота дисплея больше, чем ширина). |
| resolution | Указывает разрешение (плотность пикселей) устройства вывода. Может быть указана в dpi (точек на дюйм) или в dpcm (точек на сантиметр). Может иметь префикс «min» или «max». |
| scan | Определяет процесс сканирования телевизионных устройств вывода. |
| width | Указывает ширину области просмотра, например, окно браузера. Может иметь префикс «min» или «max». |
Наиболее важными из особенностей устройств для медиа запросов являются min-width и max-width, позволяющие создавать гибкие конструкции, в которых изменение макета сайта происходит на основе области просмотра браузера, установленного на устройстве.
Медиа запросы сочетают в себе тип устройства и условие, состоящее из одной или нескольких особенностей устройства. Например правила в следующем запросе применяются только при просмотре на экране с минимальной шириной области просмотра 600px:
@media screen and (min-width: 600px) <>
Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:
@media (max-width: 500px) and (min-aspect-ratio: 1/1) <>
Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.
Логические операторы
В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.
Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:
@media (min-width: 700px), (orientation: landscape) <>
Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:
@media not screen and (device-width: 800px) <>
Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.
/* Не работает в старых браузерах */ @media only screen and (min-width: 600px) <>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
Какие логические операторы работают в строке медиазапроса
Как уже известно из спецификации CSS, особый стиль оформления можно создавать для отдельного типа устройства. С выходом спецификаций версии CSS3 стало возможно еще корректировать оформление в зависимости от технических возможностей этих самых устройств. В качестве примера, можно вычислить девайс, у которого максимальное разрешение экрана 640 пикселей и составить для него отдельную таблицу стилей, а для прочих устройств можно с генерировать свое оформление. Кроме этого с легкостью можно определять такие показатели, как монохромность экрана, ориентации страниц при выводе и прочие полезные характеристики. Также стоит отметить, что все эти параметры можно кооперировать. Таким образом мы можем определить уникальный стиль для устройства, у которого определенное разрешение и ориентация страниц. Полагаясь на все эти достоинства CSS3, стало возможным создавать адаптивные ресурсы, которые гармонично будут отображаться при любых условиях и определенных индивидуальных технических характеристах. Так, при уменьшении ширины окна браузера или экрана можно переопределять число колонок на сайте или размеры ключевых блоков, подгоняя их под нужные габариты.
Как правильно задавать?
Ключевая характеристика медиа-запроса — это правило @media, с него необходимо начинать все запросы. После него указывают определенный тип устройства, для которого составляется оформление. За этим следует указание логического оператора и медиа-функции. Разновидность типов носителей, через которые может выводится информация, представлены ниже:
| Носитель | Пояснение |
| all | Соответствует всем возможным носителям. Это значения установлено по умолчанию |
| braille | Носитель, который работает по принципу Брайля. Такие устройства предназначены для людей, которые не видят. |
| embossed | Принтеры, которые осуществляют печать информации по принципу Брайля (предназначено для людей с ограниченным зрением). |
| handheld | Соответствует КПК и похожим устройствам. |
| Печатающие устройства. | |
| projection | Проектор. |
| screen | Монитор. |
| speech | Устройство, которое считывает информацию и преобразует ее в голосовой формат. В качестве примера выступает речевой браузер. |
| tty | Устройства, у которых прописан стандартный размер символов и дисплеев (к примеру, телетайп). |
| tv | Телевизор. |
Логические операторы с примерами использования в коде
and Союз, который предназначен для объединения разных условий. Его логическое значение — «и». Ниже представлен пример, который формирует стилевое оформление для цветных носителей.
@media all and (color) … >
not Частица, которая противоречит определенному условию или событию. В нижнем примере записан запрос на применение стиля ко всем существующим девайсам за исключением смартфонов
@media all and (not handheld) … >
как выбрать брокера на фондовом рынке. Стоит отметить, что данный оператор имеет не высокий приоритет считывания, поэтому он принимается во внимание системой в последний момент. only Применение этого оператора рассчитано на оптимизацию работы устаревших браузеров, которые могут не поддерживать медиа-запросы
@media only all and (not handheld) … >
Логические операторы исключают присутствие элемента, который в логическом смысле выполнял бы функции «или». Вместо этого применяются запятые. То есть в определенном наборе условий применение стилей будет осуществлено, если хотя бы одно из них подтвердится. Также следует отметить роль скобок в синтаксисе этих операторов, они предопределяют приоритет операции при считывании кода.
@media all and (orientation: landscape), all and (min-width: 480px) … >
Представленный пример определяет оформление для устройств с альбомной ориентацией страниц или для тех аппаратов, у которых минимальная ширина экрана 480 пикселей.
Медиа-функции
Функции осуществляют задачу по уточнению определенных технических характеристик при выводе документа. Принцип работы условия основывается на считывании истинного значения. Другими словами если программированное утверждение выполняется, то и стиль будет задействован. Основываясь на практическом опыте можно сказать, что подавляющее большинство функций работают по принципам массивов с указанными пределами. То есть условие будет находиться на минимальном или максимальном значении определенного параметра. Для этого используются приставки min- и max-. aspect-ratio (min-aspect-ratio, max-aspect-ratio) Устанавливает приемлемое соотношение показателя высоты и ширины активной области устройства, где будет производится вывод содержимого веб-документа. Эта функция справедлива для таких носителей, как смартфон, принтер, проектор, экран и телевизор. Значение записываются в числовом формате. Разделителем между высотой и шириной служит обычный слеш (/). color (min-color, max-color) Эта функция подключает стилевое оформление в соответствии с цветовыми возможностями устройства, а именно количество бит на канал основного цвета. Для того, чтобы картина прояснилась, предлагаю рассмотреть простой пример. Предположим, что установленное значение наименьшей возможной цветовой гаммы является число 3. Это говорит о том, что устройство должно поддерживать 23 оттенков каждого из основного цвета. Просчитав все возможные комбинации цветов получим, что при таком значении, чтобы оформление применялось, нужно, чтобы устройство поддерживало как минимум 512 цветов. Ниже смотрим пример
@media screen and (min-color:3) /* Минимум 512 цветов */ body background: #ccc; > >
color-index (min-color-index, max-color-index) Эта функция имеет сходство с предыдущей по принципу работы, но определяет она слегка другой параметр. Цель проверки — определить количество цветов, которое может воспроизвести устройство. Значением опять же выступает число, только теперь никаких вычислений — указываем сразу необходимый параметр. Такая функция часто используется для определения параметров смартфонов, принтеров, экранов и телевизионных устройств.
@media all and (min-color-index: 256) … >
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) Данная функция создана для определения соотношения экрана устройства, для которого составлялось оформление. Для этого достаточно указать два числа, которые соответствуют высоте и ширине экрана. Эти два значения должны разделятся между собой слешем (/). Ниже показан пример для девайсов с соотношением 16:9 и более
@media screen and (min-device-aspect-ratio: 16/9) … >
device-height (min-device-height, max-device-height) В этом случае речь идет о точном определении полной высоты устройства, на которое будет загружаться информация. Такая функция применяется во всех цифровых носителях за исключением устройств типа speech. device-width (min-device-width, max-device-width) Аналогично предыдущей функции, только этот оператор затрагивает значение ширины. В той же мере этой функцией пользуются во всех типах устройств, кроме речевых браузеров и похожих устройств. Ниже показан пример, согласно которому можно определить ширину страницы в зависимости от разрешения экрана:
DOCTYPE html> html> head> meta charset="utf-8"> title>device-widthtitle> style> div padding: 10px; background: #e8bfad; margin: auto; > @media screen and (min-device-width: 1600px) div width: 1500px;> > @media screen and (device-width: 1280px) div width: 1100px;> > @media screen and (device-width: 1024px) div width: 980px;> > style> head> body> div> Очень интересная информация для примера бла бла бла и тому подобное. div> body> html>
grid Сообщает системе, что данное устройство вывода распознает только один шрифт, не используя при этом параметры его высоты и интервалов между строк и букв. Такие устройства в наше время уже редкость, но иногда все-таки попадаются. К примеру, банковские терминалы. Для таких устройств характерно использование единиц em (если все таки пришлось прибегнуть к форматированию), как показано в примере
DOCTYPE html> html> head> meta charset="utf-8"> title>gridtitle> style> @media handheld and (grid) and (max-width: 15em) body font-size: 2em; > > style> head> body> p>Текст, который будет считываться с допотопного устройства.p> body> html>
height (min-height, max-height) Работа функции очень похожа на CSS-свойство определения высоты элемента. В этом случае определяется высота активной зоны, которая захватывает определенный участок информации. Этот параметр зависит от высоты экрана устройства и не может привышать этот показатель, за исключением того случая, когда страница может масштабироваться. monochrome (min-monochrome, max-monochrome) Определяет показатель монохромности устройства. Это позволяет для черно-белого дисплея составить более простое в цветовом плане оформление. В качестве значения функции выступают обычные числа, которые сообщают нагрузку бит на 1 пиксель. Чтобы было более понятно, при укаании числа 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 Функция распознает ориентации страниц в устройстве. Существует две достаточно распространенные ориентации: альбомная и книжная. В первом случае у страницы ширина будет превышать показатель высоты, а во втором — с точностью до наоборот. Ниже представлен пример, в котором фоновое изображение меняется в зависимости от установленной ориентации устройства
@media screen and (orientation: landscape) #logo > @media screen and (orientation: portrait) #logo >
resolution (min-resolution, max-resolution) Устанавливает разрешения считывающего устройства, на основе чего будет применятся заданное оформление. Ниже показано, как можно определить оформление для принтера, у которого разрешение составляет 500 точек на дюйм рабочего пространства
@media print and (min-resolution: 300dpi) … >
- Первый метод называется череcстрочный (interlace) — упрощенный способ считывания информации по которому сначала выводятся четные строчки кадра, а затем не четные.
- Прогрессивный (progressive) метод работает по сложному и выводит полную информацию и сразу.
width (min-width, max-width)
Указывает на ширину активной зоны экрана или браузера. Зачастую этот параметр не превышает ширину экрана устройства для вывода информации. Применяется этот параметр при адаптивной верстке, когда нужнео наладить нормальное оформления для устройств с разной шириной экрана. Ниже представлен один небольшой пример, по которому при изменении ширины будет менятся цвет заднего фона
DOCTYPE html> html> head> meta charset="utf-8"> title>Ширина страницыtitle> style> body background: #eee; > @media screen and (max-width: 980px) body background: #fc0; > > style> head> body> p>Текст, который не имеет никакого смысла и написан для примера. Такие тексты называют рыбными.p> body> html>
Что такое медиа запросы CSS и для чего они нужны
Статья также доступна на украинском (перейти к просмотру).
Оглавление:
- Когда целесообразно их применение
- Подключение медиа запроса через в шапке сайта со стилями, которые прописаны в отдельном файле CSS
- Как записать медиа запрос в общем CSS файле
- Рассмотрим синтаксис написания медиа запросов
- Примеры написания медиа запросов
- Выводы
В современных реалиях пользователи посещают сайты с самых различных устройств: стационарные компьютеры, планшеты, смартфоны . Причем большинство уже заходит со смартфонов.
Но как сделать так, чтобы сохранить удобство пользования со всех типов устройств и при этом не перегрузить код лишними CSS стилями? Читайте об этом в нашей статье.
Также необходимо соблюдать нормы по Core Web Vitals.
Для того, чтобы каждый раз загружать не все стили, а лишь те, которые нам необходимы, и существуют медиа запросы CSS, они же — медиа выражения CSS.
Медиа запросы (media queries) – это правила CSS позволяющие управлять стилями элементов в зависимости от значений технических параметров (высота и ширина браузера, разрешение страницы, типа устройства, его ориентации, плотности пикселей и т.д.). Впервые начали применяться в CSS 3.
Когда целесообразно их применение
Страница сверстана в несколько колонок
Трех колоночный дизайн достаточно часто встречается в HTML верстке.
Однако, если на широком мониторе, компа или ноутбука, он будет смотреться отлично, со смартфона это будет очень неудобно и некрасиво.
Необходимо “конвертировать” эти три колонки в одну.
Различная величина шрифтов
Если на стационарных компьютерах заголовки и подзаголовки в 60 px буду смотреться хорошо, то на экранах смартфонов они могут просто не помещаться на экране.
Необходимо задать отдельные стили для мобильных устройств.
Подробнее о подключении нестандартных шрифтов и оптимизации скорости их загрузки смотрите в статье-мануале здесь.
Различные отступы между блоками и полями
Требования по margin и padding для мобильных, компьютеров и планшетов разные.
Поэтому, то, что удобно смотрится на широкоугольных мониторах, на смартфоне сожмется в “одну кучу” и налезет друг на друга.
Также страница не будет оптимизирована под использование с мобильных устройств.
Подробнее о такой оптимизации, а также об оптимальном расстоянии между блоками для мобильной верстки смотрите по указанной ссылке.
Избежание горизонтальной прокрутки
Если Вы укажите фиксированную ширину блока, например width=960px, то на широкоугольном мониторе страница будет выглядеть красиво и удобно. А вот на смартфонах и других мониторах возникнет горизонтальная прокрутка. Поэтому для каждого типа устройства следует указывать свою ширину.
Или воспользуйтесь свойствами CSS max-width, min-width.
Удобство навигации
Панель управления и меню сайтов десктопных компьютеров и смартфонов — это разные вещи. Поэтому навигация для компьютеров и смартфонов должны реализовываться по-разному.
Ненужные элементы для мобильной верстки
Некоторые элементы, которые используются для десктопнной версии сайта, в мобильной версии практически не используются и не нужны. Применяйте свойство display:none при применении медиа запросов CSS и Вы уберете ненужные для мобильной версии блоки.
Разрешение экрана в наше время колеблется от 320 px для смартфонов до 2560 px для широкоугольных мониторов.
Медиа выражения могут быть записаны как в общем файле стилей, так и вынесены в отдельный CSS файл с подключением через ссылку в шапке сайта.
Оба способа равнозначны.
Подключение медиа запроса через в шапке сайта со стилями, которые прописаны в отдельном файле CSS
На картинке ниже показан пример подключения медиа запросов, находящиеся в отдельном, собственном CSS файле.
При подключении таблицы стилей используем атрибут media устанавливаем медиа запрос и указываем условия, при которых они должны использоваться.
href=«/assets/mobile.css — указываем путь к файлу CSS со стилями для данного медиа запроса;
Так стили следует записывать, если они разнесены в разные CSS файлы.
Ключевое слово “@media. ” с условиями по нему писать не нужно.
Как записать медиа запрос в общем CSS файле
Если же все стили записаны в одном файле, то медиа запрос необходимо записать после всех стилей CSS, потому что в противном случае они будут переписывать его.
Не забудьте про ключевое слов “@media” и условия по нему.
Рассмотрим синтаксис написания медиа запросов
Типы устройств, для которых указано это правило:
- screen — тип устройства, на котором будет применяться это правило. В данном случае это дисплей (экран);
- print — принтер или режим предварительного просмотра страницы перед печатью;
- all — все типы устройств;
- speech — гаджеты, которые читают контент с экрана (скринридеры).
Условия медиа запросов разделяются основными логическими операторами:
- and — требуется выполнения всех указанных условий;
- запятая “,” — требуется выполнения одного из указанных условий;
- not — отрицание указанного условия. Т.е. если указанное условие не выполняется.
В круглых скобках указываются медиа функции. Это простые функции, которые воспринимаются как правило.
Для указания размеров существует 7 основных значений:
- min-width;
- max-width;
- width;
- min-height;
- max-height.
- height.
Для указания ориентации мобильного устройства:
С этим значением устанавливаются определенные стили, в зависимости от того, в каком режиме (альбомном или портретном) будет отображаться сайт. Т.е. в каком положении пользователь будет держать мобильное устройство: в горизонтальном или вертикальном.
Самые распространенные значения — это min-width, max-width, когда нужно применить стили под определенное разрешение экрана смартфона.
Примеры написания медиа запросов
Рассмотрим подробнее в примерах медиа функции, которые задаются под определенные условия по ширине браузера, дисплея.
Для удобства их можно копировать прямо в CSS стили вместе с комментариями.
@media screen and (max-widht:1080px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>
/*Данное правило предназначено для дисплеев/браузеров с шириной не более 1080 px. Если ширина экрана будет более 1080 px, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/
@media (max-width: 1920px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>
/*Данное правило предназначено для дисплеев/браузеров с шириной более 1920 px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/
@media (min-width: 1080px) and (max-width: 1920px)
/*Данное правило предназначено для дисплеев/браузеров с шириной более 1080px и менее 1920px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/
@media (min-height: 720px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>
/*Данное правило предназначено для дисплеев/браузеров с высотой 720 px. Если высота экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/
@media (orientation: landscape)
/* При альбомном (горизонтальном) отображении сайта его блоки будут отображаться в строку */
> @media (orientation: portrait) < ;body < flex-direction: column; >>
/* При портретном (вертикальном) отображении сайта его блоки будут отображаться вертикально */
Медиа запросы чаще всего следует применять, если при проверке возникают следующие проблемы:
- Шрифт слишком мелкий;
- Блоки расположены слишком близко;
- Появляется горизонтальная прокрутка.
Выводы
В современных реалиях медиа запросы CSS — это важный прием для оптимизации верстки сайта, скорости загрузки, удобства для пользования со смартфона или планшета. Как следствие более успешного продвижения и ранжирования в поисковой выдаче.
Из написанного выше можно сделать следующие выводы по медиа выражениям:
- Запрос состоит из ключевого слова @media, одного или нескольких условий с логическими операторами для их комбинирования и CSS стилей, которые необходимо применить, в случае выполнения условий;
- Самые распространенные условия — это min-width, max-width;
- Выражения в общих CSS файлах необходимо записывать после всех стилей;
- Выражения с большим объемом CSS стилей записывайте в отдельный файл, с привязкой ссылки на него в основном HTML документе. При этом ключевое слово @media с фигурными скобками к нему в этом отдельном файле писать не нужно, только CSS стили;
- Используйте выражения для оптимизации мобильной верстки, недопущения горизонтальной прокрутки, оптимизации размера шрифтов.
При написании этой статьи использовались материалы от: Александра Мальцева, видео блогов Web Developer Blog, WebDev.
Подписывайтесь на наш телеграмм — канал t.me/freehostua, чтобы быть в курсе новых полезных материалов. Смотрите наш Youtube канал на youtube.com/freehostua.
Медиа-запросы
Наряду с типами носителей в 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 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.