CSS правило `@media`

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

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

Условие не добавляет специфичности вложенным селекторам. При совпадении нескольких запросов их объявления участвуют в обычном каскаде; последнее правило выигрывает только при равных остальных приоритетах.

Современные запросы

Ширина width — ширина области просмотра в CSS-пикселях, а не физического экрана. Записи (min-width: 48rem) и (width >= 48rem) задают нижнюю границу; (30rem <= width < 60rem) — диапазон без пересечения на верхней границе. Точки перестройки выбирайте по содержимому, а не по модели телефона. Относительные единицы шрифта в запросах зависят от начальных настроек браузера, а не от font-size элемента.

prefers-reduced-motion: reduce сообщает о предпочтении уменьшить движение; prefers-color-scheme: dark — о тёмной теме. hover и pointer описывают основной указатель, any-hover и any-pointer — доступные указатели. Ширина экрана не доказывает наличие мыши. @supports проверяет поддержку CSS, это другая задача, чем проверка среды через @media.

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

Спецификации: mediaqueries, CSS conditional-3

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (21) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.at-rules.media
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`media`	✓1	✓12	✓1	✓9.2	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓2	✓1
`-moz-device-pixel-ratio`	×	×	✓4	×	×	×	✓4	×	×	×	×	×
`-webkit-animation`	×	×	×	×	✓4	×	×	×	✓3.2	×	×	✓3.2
`-webkit-device-pixel-ratio`	✓1	✓12	✓63	✓15	✓3	✓18	✓63	✓14	✓1	✓1.0	✓4.4	✓1
`-webkit-max-device-pixel-ratio`	✓1	✓12	✓63	✓15	✓3	✓18	✓63	✓14	✓1	✓1.0	✓4.4	✓1
`-webkit-min-device-pixel-ratio`	✓1	✓12	✓63	✓15	✓3	✓18	✓63	✓14	✓1	✓1.0	✓4.4	✓1
`-webkit-transform-2d`	×	×	×	×	✓4	×	×	×	✓3.2	×	×	✓3.2
`-webkit-transform-3d`	✓2	✓12	✓49	✓15	✓4	✓18	✓49	✓14	✓3.2	✓1.0	✓4.4	✓3.2
`-webkit-transition`	×	×	×	×	✓4	×	×	×	✓3.2	×	×	✓3.2
`any-hover`	✓41	✓16	✓64	✓28	✓9	✓41	✓64	✓28	✓9	✓5.0	✓41	✓9
`any-pointer`	✓41	✓12	✓64	✓28	✓9	✓41	✓64	✓28	✓9	✓4.0	✓41	✓9
`aspect-ratio`	✓3	✓12	✓3.5	✓10	✓5	✓18	✓4	✓10.1	✓4.2	✓1.0	✓4.4	✓4.2
`calc`	✓66	✓79	✓59	✓53	✓12	✓66	✓59	✓47	✓12	✓9.0	✓66	✓12
`color`	✓1	✓12	✓2	✓10	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`color-gamut`	✓58	✓79	✓110	✓45	✓10	✓58	✓110	✓43	✓10	✓7.0	✓58	✓10
`p3`	✓58	✓79	✓110	✓45	✓10	✓58	✓110	✓43	✓10	✓7.0	✓58	✓10
`rec2020`	✓58	✓79	✓110	✓45	✓10	✓58	✓110	✓43	✓10	✓7.0	✓58	✓10
`srgb`	✓58	✓79	✓110	✓45	✓10	✓58	✓110	✓43	✓10	✓7.0	✓58	✓10
`color-index`	✓29	✓79	×	✓16	✓8	✓29	×	✓16	✓8	✓2.0	✓4.4	✓8
`device-aspect-ratio`	✓1	✓12	✓2	✓10	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`device-height`	✓1	✓12	✓2	✓10	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`device-posture`	✓132	✓132	×	✓117	×	✓132	×	✓87	◐27	✓16.2	✓132	×
`device-width`	✓1	✓12	✓2	✓10	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`display-mode`	✓42	✓79	✓47	✓29	✓13	✓42	✓47	✓29	✓12.2	✓4.0	✓42	✓12.2
`browser`	✓42	✓79	✓47	✓29	✓13	✓42	✓116	✓29	✓12.2	✓4.0	✓42	✓12.2
`fullscreen`	✓47	✓79	◐47	×	◐13	×	✓116	×	◐12.2	×	×	◐12.2
`minimal-ui`	✓42	✓79	✓57	✓29	✓13	✓42	✓116	✓29	◐12.2	✓4.0	✓42	◐12.2
`picture-in-picture`	✓123	✓123	✓151	✓109	×	×	✓151	×	×	×	×	×
`standalone`	✓42	✓79	✓57	✓29	✓13	✓42	✓116	✓29	◐12.2	✓4.0	✓42	◐12.2
`window-controls-overlay`	✓105	✓105	×	✓91	×	×	×	×	×	×	×	×
`dynamic-range`	✓98	✓98	✓100	✓84	✓13.1	✓98	✓100	✓68	✓13.4	✓18.0	✓98	✓13.4
`forced-colors`	✓89	✓79	✓89	✓75	✓16	✓89	✓89	✓63	✓16	✓15.0	✓89	✓16
`grid`	✓1	✓12	✓2	✓10	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`height`	✓1	✓12	✓2	✓10	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`horizontal-viewport-segments`	✓138	✓138	×	✓122	×	✓138	×	✓91	×	✓30.0	✓138	×
`hover`	✓38	✓12	✓64	✓25	✓9	✓50	✓64	✓37	✓9	✓5.0	✓50	✓9
`inverted-colors`	×	×	◐114	×	✓9.1	×	×	×	✓10	×	×	✓10
Media feature expressions	✓1	✓12	✓1	✓9.2	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
Media query value support	✓66	✓79	✓59	✓53	×	✓66	✓59	✓47	×	✓9.0	✓66	×
`monochrome`	✓1	✓79	✓2	✓10	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`nested-queries`	✓26	✓12	✓11	✓12.1	✓7	✓26	✓14	✓12.1	✓7	✓1.5	✓4.4	✓7
or syntax from Media Queries Level 4	✓104	✓104	✓64	✓90	✓16.4	✓104	✓64	✓71	✓16.4	✓20.0	✓104	✓16.4
`orientation`	✓3	✓12	✓2	✓10.6	✓5	✓18	✓4	✓11	✓4.2	✓1.0	✓4.4	✓4.2
`overflow-block`	✓113	✓113	✓66	✓99	✓17	✓113	✓66	✓76	✓17	✓23.0	✓113	✓17
`overflow-inline`	✓113	✓113	✓66	✓99	✓17	✓113	✓66	✓76	✓17	✓23.0	✓113	✓17
`pointer`	✓41	✓12	✓64	✓28	✓9	✓50	✓64	✓28	✓9	✓5.0	✓41	✓9
`prefers-color-scheme`	✓76	✓79	✓67	✓62	✓12.1	✓76	✓67	✓54	✓13	✓14.2	✓76	✓13
`no-preference`	×	×	×	×	×	×	×	✓54	×	✓14.2	×	×
`respects-inherited-scheme`	✓129	✓129	✓105	✓115	×	✓129	✓105	✓86	×	✓28.0	✓129	×
`prefers-contrast`	✓96	✓96	✓101	✓82	✓14.1	✓96	✓101	×	✓14.5	✓17.0	✓96	✓14.5
`prefers-reduced-data`	◐85	◐85	×	◐71	×	◐85	×	×	×	×	×	×
`prefers-reduced-motion`	✓74	✓79	✓63	✓62	✓10.1	✓74	✓64	✓53	✓10.3	✓11.0	✓74	✓10.3
`prefers-reduced-transparency`	✓118	✓118	◐113	✓104	×	✓118	×	✓79	×	✓25.0	✓118	×
Range syntax from Media Queries Level 4	✓104	✓104	✓102	✓90	✓16.4	✓104	✓102	✓71	✓16.4	✓20.0	✓104	✓16.4
`resolution`	✓29	✓12	✓8	✓16	✓16	✓29	✓8	✓16	✓16	✓2.0	✓4.4	✓16
`scan`	✓104	✓104	✓63	✓90	✓16.4	✓104	✓63	✓71	✓16.4	✓20.0	✓104	✓16.4
`scripting`	✓120	✓120	✓113	✓106	✓17	✓120	✓113	✓80	✓17	✓25.0	✓120	✓17
`update`	✓113	✓113	✓102	✓99	✓17	✓113	✓102	✓76	✓17	✓23.0	✓113	✓17
`vertical-viewport-segments`	✓138	✓138	×	✓122	×	✓138	×	✓91	×	✓30.0	✓138	×
`video-dynamic-range`	◐98	◐98	✓100	◐84	×	◐98	✓100	×	×	×	×	×
`width`	✓1	✓12	✓2	✓10	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
Ещё 35 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

@media (width >= 40rem) { /* правила для широкой области просмотра */ }
@media screen and (orientation: landscape) { /* экранная область шире своей высоты */ }
@media print, (prefers-reduced-motion: reduce) { /* достаточно одного совпавшего условия */ }

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

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

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

Значение	Описание
and	Оператор and ("И") используется для объединения нескольких медиазапросов в один.
not	Оператор not ("Логическое НЕ") обращает результат - если медиазапрос был истинным без "not", то он станет ложным, и наоборот.
only	Оператор only ("Только") может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор.
,	Оператор "," позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает "true" (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR ("ИЛИ" ).

В условии можно использовать or, например (hover: hover) or (pointer: fine). Не смешивайте and и or на одном уровне без группировки скобками. Запись not screen and (color) отрицает весь запрос. only — исторический модификатор перед типом среды; в современных браузерах он не меняет результат.

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

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

Значение	Описание
`all`	Подходит для всех типов устройств. Это значение по умолчанию.
`aural`	Предназначено для речевых синтезаторов. Значение считается устаревшим.
`braille`	Устройства для чтения шрифта Брайля (рельефно-точечный тактильный шрифт, предназначенный для письма и чтения незрячими и плохо видящими людьми). Значение считается устаревшим.
`embossed`	Устройства, предназначенные для печати шрифта Брайля. Значение считается устаревшим.
`handheld`	Предназначено для портативных устройств (маленький экран и ограниченная полоса пропускания - bandwidth). Значение считается устаревшим.
`print`	Предназначен для печатных страниц и для режима предварительного просмотра печати.
`projection`	Устройства проекционного типа (проекторы). Значение считается устаревшим.
`screen`	Экранное отображение, включая компьютеры, телефоны и планшеты.
`speech`	Речевое представление документа. Это не способ обнаружить скринридер: программы чтения с экрана обычно используют экранное представление браузера.
`tty`	Устройства, которые используют набор символов фиксированной ширины, например, телетайпы или терминалы. Значение считается устаревшим.
`tv`	Устройства телевизионного типа (низкое разрешение, ограниченные возможности прокрутки, возможность передачи звука). Значение считается устаревшим.

Устаревшие типы aural, braille, embossed, handheld, projection, tty и tv сохранены ниже для чтения старого кода: современные браузеры не сопоставляют их с устройствами. Используйте возможности среды вместо названия устройства.

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

Значение	Описание
`aspect-ratio`	Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: `aspect-ratio`: `5/4` (соотношение пять к четырем).
`color`	Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. Допускаются неотрицательные целые значения. Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент.
`color-index`	Количество записей в таблице цветов устройства; при отсутствии такой таблицы — 0. Отрицательные значения не допускаются.
`device-aspect-ratio`	Соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух неотрицательных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: `device-aspect-ratio`: `5/4` (соотношение пять к четырем). Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`device-height`	Определяет высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`device-width`	Определяет ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`grid`	Определяет основано ли выходное устройство на сеточной системе (например, терминал "tty" или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1, если устройство растровое, то значение будет равно 0.
`height`	Задает высоту области просмотра (используются единицы измерения CSS).
`max-aspect-ratio`	Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух неотрицательных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
`max-color`	Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются неотрицательные целые значения.
`max-color-index`	Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
`max-device-aspect-ratio`	Максимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух неотрицательных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`max-device-height`	Определяет максимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`max-device-width`	Определяет максимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`max-height`	Задает максимальную высоту области просмотра (используются единицы измерения CSS).
`max-monochrome`	Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются неотрицательные целые числа.
`max-resolution`	Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (`dpi`), так и в точках на сантиметр (`dpcm`).
`max-width`	Задает максимальную ширину области просмотра (используются единицы измерения CSS).
`min-aspect-ratio`	Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух неотрицательных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
`min-color`	Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются неотрицательные целые значения.
`min-color-index`	Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
`min-device-aspect-ratio`	Минимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух неотрицательных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`min-device-height`	Определяет минимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`min-device-width`	Определяет минимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим; сохранено для совместимости в "Media Queries Level 4".
`min-height`	Задает минимальную высоту области просмотра (используются единицы измерения CSS).
`min-monochrome`	Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются неотрицательные целые числа.
`min-resolution`	Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (`dpi`), так и в точках на сантиметр (`dpcm`).
`min-width`	Задает минимальную ширину области просмотра (используются единицы измерения CSS).
`monochrome`	Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются неотрицательные целые числа.
`orientation`	Определяет, находится ли область просмотра в режиме альбомной ориентации - экран шире, чем высота, или в портретной ориентации - высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: `orientation`: `landscape`, а для портретной и `orientation`: `portrait`.
`resolution`	Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (`dpi`), так и в точках на сантиметр (`dpcm`).
`scan`	Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: чересстрочная развертка - (`interlace`), прогрессивная развертка (`progressive`).
`width`	Задает ширину области просмотра (используются единицы измерения CSS).

Дополнительные медиавозможности

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 (позволяет пользователю прокрутить содержание, например, экраны компьютеров).
- paged (содержимое разделено на отдельные страницы, содержимое, выходящее за пределы одной страницы в оси блока отображается на следующей странице, например, принтеры или устройства для чтения).
overflow-inline (описывает поведение устройства, когда содержимое превышает начальный содержащий блок по inline оси.)
Значения:
- none (любое переполнение контента просто не отображается).
- scroll (позволяет пользователю прокрутить содержание).

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

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

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

HTML

<link media="screen and (min-width: 40rem)" rel="stylesheet" href="stylesheet.css">

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

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

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

HTML

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

<style media="screen and (min-width: 40rem)">
	...код CSS 
</style>
	
2. Используя CSS правило @media внутри HTML тега <style>:

<style>
	@media screen and (min-width: 40rem) {
	  ...код CSS
	}
</style>

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

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

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

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 = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

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

HTML

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 файлов:

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, который предназначается для экранов компьютера И альбомной ориентации.*/

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

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

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

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

CSS

/* 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:

CSS

/* 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):

CSS

/* 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 ("И"), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.

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

CSS

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

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

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

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

HTML

<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 и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

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

Значение атрибута	Определение
`width`	Определяет ширину в пикселях области просмотра (значение - положительное целое число или `device-width`).
`height`	Определяет высоту в пикселях области просмотра (значение - положительное целое число или `device-height`).
`initial-scale`	Определяет начальный масштаб; он влияет на соотношение между шириной устройства (`device-width` в портретном режиме или `device-height` в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — число от 0.1 до 10.0, допускающее дробную часть.
`minimum-scale`	Определяет минимальное значение zoom (оно должно быть меньше или равно `maximum-scale`). Значение - число от 0.1 до 10.0, допускающее дробную часть.
`maximum-scale`	Определяет максимальное значение zoom (оно должно быть больше или равно `minimum-scale`). Значение - число от 0.1 до 10.0, допускающее дробную часть.
`user-scalable`	Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию `yes` (пользователь может увеличивать масштаб).

Предпочтения и возможности среды

Дополнительные условия Media Queries
Условие	Назначение
`prefers-color-scheme`	Предпочитаемая светлая или тёмная схема: `light`, `dark`. Не заменяет ручной выбор темы на сайте.
`prefers-reduced-motion`	`reduce` просит уменьшить движение; `no-preference` означает отсутствие такого предпочтения.
`prefers-contrast`, `forced-colors`	Предпочтение контраста и принудительная палитра. В режиме `forced-colors: active` важны различимые границы и системные цвета.
`color-gamut`, `dynamic-range`	Цветовой охват и возможность высокого динамического диапазона; не гарантируют точность цвета конкретного изображения.
`display-mode`	Режим отображения приложения, например `browser` или `standalone`.
`update`, `overflow-block`, `overflow-inline`	Частота обновления и способ обработки переполнения устройством; это не значения CSS-свойства `overflow`.
`prefers-reduced-transparency`, `prefers-reduced-data`	Предпочтения уменьшить прозрачность и расход данных. Поддержка ограничена, проверяйте отдельно.

Разрешение также можно задавать в dppx: 2dppx равно 192dpi. aspect-ratio относится к области просмотра, а не обязательно ко всему экрану. Нулевая компонента разрешена синтаксисом отношения, но даёт вырожденный случай; обычно используют положительные числа.

Не запрещайте масштабирование страницы через user-scalable=no и не ограничивайте его ради фиксации макета. Браузер может игнорировать такие ограничения для доступности. Рекомендуемая базовая запись viewport — width=device-width, initial-scale=1.

Версия CSS

CSS3

Примеры, попробуйте сами

Медиазапрос по ширине

Условие проверяет ширину области результата. Разверните редактор или измените порог 400px, чтобы переключить одну и две колонки.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}
.cards > div {
    padding: 16px;
    background: #c5dbea;
    min-width: 0;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Медиазапрос по ширине</title>
  </head>
  <body>
    <div class="cards">
      <div>Карточка A</div>
      <div>Карточка B</div>
    </div>
  </body>
</html>

style.css

CSS

.cards {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 400px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

Стили для печати

Скачайте HTML и откройте предпросмотр печати (Ctrl+P). Навигация исчезнет, а текст станет чёрным.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}
nav {
    background: #c5dbea;
    padding: 12px;
}
.sample {
    color: #9b3c00;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Стили для печати</title>
  </head>
  <body>
    <nav>Навигация документа</nav>
    <p class="sample">Текст для чтения и печати.</p>
  </body>
</html>

style.css

CSS

@media print {
    nav {
        display: none;
    }
    .sample {
        color: black;
    }
}