CSS правило @media

Определение и применение

CSS правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне.

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
@media	21.0	3.5	9.0	4.0	9.0	12.0

CSS синтаксис:

@media not | only media type and (media function) { ...код CSS }

Давайте детально разберем из чего состоит синтаксис этого правила.

Логические операторы

Вы можете комбинировать медиазапросы с использованием логических операторов:

Устройства (media type)

Вы можете использовать медиазапросы для конкретных типов устройств:

Мультимедийные функции (media function)

Мультимедийные функции (Media Queries Level 4)

В "Media Queries Level 4" добавлены следующие новые функции, которые, возможно, будут реализованы в браузерах:

• scripting (определяет используются ли языки сценариев, такие как JavaScript в текущем документе).
  Значения:
  • enabled (скрипты доступны в текущем документе).
  • initial-only (скрипты доступны только во время первоначальной загрузке страницы, а не после).
  • none (скрипты полностью недоступны в текущем документе).
  
  
• pointer (используется для запроса о наличии и правильности указывающего устройства, такого как мышь. Если устройство имеет несколько механизмов ввода, то функция указателя должна отражать характеристики "первичного" механизма входного сигнала, который определяется браузером пользователя).
  Значения:
  • none (основной механизм ввода устройства не включает в себя указательное устройство).
  • coarse (основным механизмом ввода устройства входит указательное устройство ограниченной точности, например, сенсорные экраны и системы обнаружения движения по типу Kinect - периферийные устройства для Xbox).
  • fine (основной механизм ввода устройства включает в себя точное указывающее устройство, например, мыши, тачпады и устройства для рисования стилусом).
• any-pointer (аналогичен pointer, но используется для запроса возможности любого доступного механизма ввода).
  Значения: none | coarse | fine


• hover (используется для запроса на способность пользователя навести курсор на элемент на странице. Если устройство имеет несколько механизмов ввода, то функция должна отражать характеристики "первичного" механизма входного сигнала, который определяется браузером пользователя).
  Значения:
  • none (указывает, что основное указательное устроство не может навести курсор на элемент на странице, например, сенсорные экраны и экраны, которые используют для рисования стилусом).
  • hover (указывает, что основное указательное устроство может навести курсор на элемент на странице, например, мыши и устройства с физической точкой на экране, как контроллер Nintendo для Wii.).
• any-hover (аналогичен hover, но используется для запроса возможности любого доступного механизма наведения).
  Значения: none | hover


• color-gamut (описывает примерный диапазон цветов, которые поддерживаются UA и выходными устройствами).
  Значения:
  • srgb (выходное устройство может поддерживать примерно диапазон sRGB или более).
  • p3 (выходное устройство может поддерживать примерно диапазон, указанный DCIP3 цветового пространства или более).
  • rec2020 (выходное устройство может поддерживать примерно диапазон, указанный в ITU-R рекомендации BT.2020 цветового пространства или более).
  
  
• update (функция средства обновления используется для запроса на способность устройства вывода изменить внешний вид содержимого после его рендеринга).
  Значения:
  • none (макет не может быть обновлен, например, для документов, напечатанных на бумаге).
  • slow (макет может динамически меняться в соответствии с обычными правилами CSS, но выходное устройство не в состоянии достаточно быстро отобразить изменения, чтобы восприниматься как плавная анимация, например: e-ink экраны).
  • fast (макет может динамически изменяться в соответствии с обычными правилами CSS и выходное устройство не ограничено в скорости, поэтому такие эффекты как CSS анимация могут быть использованы, например: экраны компьютера.).
  
  
• overflow-block (определяет как выходные устройства обрабатывают содержимое, которое не помещается в область просмотра по оси блока)
  Значения:
  • none (любое переполнение контента просто не отображается, например, рекламные щиты).
  • scroll (позоляет пользователю прокрутить содержание, например, экраны компьютеров).
  • optional-paged (позволяет пользователям прокрутить переполненное содержимое, например, слайд-шоу).
  • paged (содержимое разделено на отдельные страницы, содержимое, выходящее за пределы одной страницы в оси блока отображается на следующей странице, например, принтеры или устройства для чтения).
  
  
• overflow-inline (описывает поведение устройства, когда содержимое превышает начальный содержащий блок по inline оси.)
  Значения:
  • none (любое переполнение контента просто не отображается).
  • scroll (позоляет пользователю прокрутить содержание).

Варианты подключения медиазапросов

Подключение медиазапросов с использованием тега <link>

Вы можете подключать различные стили для различных устройств, используя HTML тег <link> (определяет связь между документом и внешним ресурсом) и его атрибута media:

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media.

Подключение медиазапросов с использованием тега <style>

Вы можете подключать различные стили для различных устройств, используя HTML тег <style>, который сообщает браузеру, что внутри него содержится код CSS:

1. Используя атрибут media HTML тега <style>:

<style media =  "mediatype and | not | only (media function)">
	...код CSS 
</style>
	
2. Используя CSS правило @media внутри HTML тега <style>:

<style>
	@media not | only mediatype and (media function) {
	  ...код CSS
	}
</style>

Обратите внимание, что при использовании атрибута media тега <style> используется тот же синтаксис, что и при использовании правила @media.

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

@import url("main.css") (min-width:481px) and (max-width:768px); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */
@import url("print.css") print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */
@import url("protv.css") projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */
@import url("file.css") screen and (orientation:landscape); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Вы можете подключать различные стили для различных устройств, используя HTML тег <link> (определяет связь между документом и внешним ресурсом) и его атрибута media:

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

Вы можете подключать различные стили для различных устройств, используя HTML тег <style> (сообщает браузеру, что внутри него содержится код CSS):

1. Используя атрибут media HTML тега <style>:

<style media =  "mediatype and | not | only (media function)">
	...код CSS 
</style>
	
2. Используя CSS правило @media внутри HTML тега <style>:

<style>
	@media not | only mediatype and (media function) {
	  ...код CSS
	}
</style>

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

@import url("main.css") (min-width:481px) and (max-width:768px); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */
@import url("print.css") print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */
@import url("protv.css") projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */
@import url("file.css") screen and (orientation:landscape); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width) используются в Bootstrap 4:

// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше)
@media (min-width: 576px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и выше)
@media (min-width: 768px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и выше)
@media (min-width: 992px) { ...код CSS }

// Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше)
@media (min-width: 1200px) { ...код CSS }

Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width) используются в Bootstrap 4:

// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже)
@media (max-width: 575.98px) { ...код CSS }

// Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже)
@media (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, максимальная ширина области просмотра 992px и ниже)
@media (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, максимальная ширина области просмотра 1200px и ниже)
@media (max-width: 1199.98px) { ...код CSS }

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width):

// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px)
@media (min-width: 576px) and (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px)
@media (min-width: 768px) and (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px)
@media (min-width: 992px) and (max-width: 1199.98px) { ...код CSS }

Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and ("И"), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px)
@media (min-width: 768px) and (max-width: 1199.98px) { ...код CSS } 

Настройка области просмотра

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

<meta name = "viewport" content = "width=device-width, initial-scale = 1">

• Атрибут name задает имя документа метаданным, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
• Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
• Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Доступные значения:

Версия CSS

Пример использования

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

Для просмотра страниц пользователями мы установим следующие CSS стили:

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:

@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ 
	h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
	body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */
}

Окончательный файл CSS будет выглядеть следующим образом:

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ 
	h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
	body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */
}

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

Другими словами, если мы разместим правило @media print { } в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):

@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ 
	h2, p {color: #000 !important;} /* групповой селектор устанавливает цвет элементов - черный */
	body {background-color: #FFF !important; } /* устанавливаем цвет заднего фона - белый */
}

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Теперь свяжем наш файл CSS (css_pr_media.css) с документом, используя элемент <link>:

<link rel = "stylesheet" href = "../css_pr_media.css">

HTML разметка примера:

<!DOCTYPE html>
<html>
<head>
        <title>Пример использования CSS правила @media</title>
        <link rel = "stylesheet" href = "../css_pr_media.css">
</head>
<body>
	<h2>Рапаны</h2>
	<p><b>Рапаны (лат. Rapana)</b> — род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.</p>
</body>
</html>

Ниже показано как этот пример отображается в браузере, а на изображении как страница отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати):