Синтаксис и распространённые точки перелома

Медиазапрос оборачивает правила CSS и применяет их только при истинности определённого условия. Базовый синтаксис:

Наиболее распространённые типы медианосителей:

• all — применяется ко всем устройствам вывода (по умолчанию)
• screen — экраны компьютеров и телефонов
• print — предварительный просмотр и печать
• speech — программы чтения с экрана

Медиахарактеристики описывают особенности устройства или области просмотра. Распространённые характеристики: width, height, orientation, resolution, prefers-color-scheme, hover.

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

Универсально правильных контрольных точек не существует. Популярный набор, основанный на распространённых ширинах устройств:

• 480px — крупные телефоны
• 768px — планшеты
• 1024px — небольшие настольные компьютеры и планшеты в альбомной ориентации
• 1280px — стандартные настольные компьютеры
• 1536px — большие настольные компьютеры

Вместо контрольных точек для устройств современный подход задаёт их там, где нарушается отображение содержимого. Спроектируйте макет для одного размера, изменяйте размер и добавьте контрольную точку, когда макет начнёт выглядеть плохо.

Современный CSS поддерживает синтаксис диапазонов внутри медиазапросов — он удобнее для чтения, чем объединение min и max:

Используйте and, чтобы одновременно требовать выполнения нескольких условий:

Используйте not, чтобы инвертировать медиазапрос. Он применяется ко всему, что не соответствует запросу, то есть к NOT совпадающим вариантам:

Разделяйте несколько запросов запятыми — как список селекторов. Стили применяются, если совпадает ANY запрос.

Использование единиц em для контрольных точек вместо px позволяет им масштабироваться вместе с предпочтительным размером шрифта в браузере пользователя, повышая доступность.

Какой медиазапрос выбирает экраны шириной не менее 1024px?

Медиазапросы условно применяют CSS на основе характеристик устройства или области просмотра. Используйте min-width при разработке с приоритетом мобильных устройств, а max-width — при разработке с приоритетом настольных устройств. Задавайте контрольные точки там, где этого требует содержимое, а не на произвольных размерах устройств. Современный синтаксис диапазонов повышает удобство чтения.