Как использовать медиа-запросы в CSS?

Что такое медиа-запросы в CSS

Медиа-запросы — это особые правила применения CSS, с помощью которых можно менять стиль элементов, отталкиваясь от устройств, на которых будут просматривать веб-страницу.

Проще говоря, они позволяют понять, какие именно стили нужно запускать на выбранной странице, а какие — нет. Например, с ними сайт одинаково удобно и красиво отображается на экране смартфона или большом мониторе.

Медиа-запросы стали актуальными в CSS3. На сегодня они поддерживаются всеми современными браузерами, среди которых Chrome, Opera, Firefox, Safari.

Ключевая задача медиа-запросов — адаптивный дизайн сайта. Благодаря им внешний вид страниц будет варьироваться, исходя из размеров монитора или экрана.

Овладеть тонкостями работы с CSS запросами можно на курсах наших партнеров в Mate Academy, Robot Dreams, Powercode Академия.

Синтаксис медиа-запросов

Запись медиа-запросов в теле сайта выглядит вот так:

@media условие { /* стили, которые становятся активными при соответствии условию }

Можно добавлять их в HTML-части сайта, внутри таблицы CSS, а также напрямую в код страницы. Если речь идет о старых браузерах, то можно подключить специальную JavaScript-библиотеку, чтобы медиа-запросы функционировали корректно.

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

• все устройства — all;
• устройства с экранами — screen;
• синтезаторы речи — speech;
• принтеры или страница предварительного просмотра для печати — print.

Когда-то раньше также использовались:

• проекторы — projection;
• телевизоры — tv;
• смартфоны и другие мобильные устройства — handheld.

Но в современной версии media queries 4 их принято считать устаревшими.

Также медиа-запросы могут содержать в себе логические операторы, такие как:

• and — все условия должны выполняться одновременно;
• , — хотя бы одно из условия должно выполняться, аналогично «или»;
• not — отрицание условия (имеет более низкий приоритет, чем and, а значит будет выполняться после него).

Для составления условий можно использовать некоторые функции:

• width (max-width и min-width) — определяет требования к ширине браузера, наибольшее и наименьшее значения этого параметра в пикселях или других единицах: @media(width: 720px);
• height, min-height и max-height — прописывает требования к высоте браузера, аналогично функциям ширины: @media (max -height: 1080px);
• color определяет количество бит на канал цвета (также есть значения min и max);
• aspect-ratio (min-aspect-ratio, max-aspect-ratio) — отношения ширины к высоте: @media screen and (device-aspect-ratio: 1920/1080);
• orientation — оценивает режим отображения страницы: портретный (portrait) или альбомный (landscape);
• resolution (min-resolution, max-resolution) — это разрешение устройства ввода: требуемое, минимальное и максимальное; измеряется в dpi, dpcm или dppx.

Какие бывают медиа-запросы

Медиа-запросы могут записываться в виде атрибута для элемента link. Это помогает определить, какие файлы CSS-таблиц нужно активировать на странице в зависимости от характеристик устройства. Такой функционал чаще всего используется, когда к разным типам технического оборудования применяются разные стили CSS.

Приведем в пример фрагмент кода, который иллюстрирует подключение файла styles-xs.css для устройств, размер экрана которых меньше 543 пикселей:

<link rel="stylesheet" media="screen and (max-width: 543px)" href="styles-xs.css">

Также подобные запросы можно включать в состав правила @import, отвечающего за импорт стилей из других CSS-файлов. Так, для того же файла можно записать следующий код:

@import url(styles-xs.css) (max-width: 543px);

Медиа-запросы можно реализовывать для Bootstrap 3 и  Bootstrap 4. Например, можно прописать media queries в порядке увеличения размеров для нескольких классов устройств:

@media (min-width: 768px) { /* Стили для устройств с маленьким экраном, размерами 768px - 991px (планшеты и подобные) */ }

@media (min-width: 992px) {  /* Стили для ноутбуков и компьютеров с экранами в диапазоне 992px - 1199px */ }

@media (min-width: 1200px) {  /* Стили для устройств с большой шириной экрана >1200px */ }

Использовать эти медиа-запросы нужно исключительно в таком порядке. Если вы хотите применять их в произвольной последовательности, то добавьте в них максимальное значение. То есть укажите полноценный диапазон размеров экранов в Bootstrap 3:

@media (max-width: 767px) { ... }

@media (min-width: 768px) and (max-width: 991px) { ... }

@media (min-width: 991px) and (max-width: 1199px) { ... }

@media (min-width: 1200px) { ... }

Если же речь идет о медиа-запросах в Bootstrap 4, то можно написать такое постепенное увеличение наименьшей ширины экрана:

@media (min-width: 576px) { /* CSS для экранов размером: 576px – 767px */ }

@media (min-width: 768px) {  /* CSS для: 768px – 991px */ }

@media (min-width: 992px) { /* CSS для: 992px – 1119px */ }

@media (min-width: 1200px) {  /* CSS для экранов больше 1200px */ }

Подобные запросы, но с максимальным значением можно применять в в обратном порядке, чтобы шло убывание размеров экрана. Если вы хотите писать медиа-запросы в рандомной последовательности в таблице стилей, то укажите точные промежутки, то есть сразу пропишите min-width и max-width. Тогда фрагмент кода будет выглядеть вот так:

@media (max-width: 575px) { ... }

@media (min-width: 576px) and (max-width: 767px) { ... }

@media (min-width: 768px) and (max-width: 991px) { ... }

@media (min-width: 992px) and (max-width: 1199px) { ... }

@media (min-width: 1200px) { ... }

Заключение

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