Медиа-запросы позволяют задавать разные CSS-правила для разных размеров экрана внутри одного файла: конструкция @media проверяет условие (например, ширину окна) и применяет вложенные стили, только если оно выполняется. Это и есть техническая основа адаптивной вёрстки, а не только резиновые ширины и относительные единицы из прошлых уроков.
В этом уроке
Попробуй прямо сейчас: подвигай ползунок - он по-настоящему меняет ширину маленького окна ниже. У этого окна СВОЙ собственный экран для медиа-запросов, поэтому его @media (max-width: 260px) реально срабатывает и перестаёт срабатывать по ходу движения ползунка - это не имитация, а настоящее поведение браузера.
Синтаксис: правило @media, min-width и max-width
Медиа-запрос - это обычный CSS-блок, обёрнутый в условие: @media (условие) { обычные правила }. Если условие выполняется - браузер применяет правила внутри так, будто их вообще не оборачивали в @media, а если нет - полностью их игнорирует. Медиа-запросы - один из трёх компонентов адаптивного дизайна по Маркотту, наравне с резиновыми сетками и гибкими изображениями, и именно они отвечают за "переключение" стилей между размерами экрана. Два базовых условия: min-width означает "эта ширина и шире", max-width означает "эта ширина и уже". Важный момент: правило внутри @media не получает никакого особого приоритета - действует обычный каскад. Если после обычного правила `.card{color:red}` идёт `@media (min-width:0){.card{color:blue}}`, победит синий - просто потому что он позже в коде, при той же специфичности.
@media (max-width: 600px) { .menu { display: none; } } - меню скрывается на экранах 600px и уже.
ожидание, что правило внутри @media всегда побеждает - на деле работает обычный каскад: порядок в коде и специфичность решают, даже когда медиа-запрос совпал.
Логические операторы: and, запятая и not
Одного условия часто мало. and требует, чтобы выполнялись ОБА условия сразу: @media (min-width: 400px) and (max-width: 600px) сработает только в диапазоне между 400 и 600px. Запятая работает как "ИЛИ": @media (max-width: 400px), (min-width: 600px) сработает, если выполняется ХОТЯ БЫ одно из условий - то есть на очень узких ИЛИ на очень широких экранах, но не в середине. not переворачивает весь медиа-запрос целиком (не одно свойство внутри него) и обязательно требует указать тип устройства: @media not screen { ... } сработает для всего, что не экран (например, печать), и не сработает в обычном браузере.
@media (min-width: 768px) and (max-width: 1024px) { ... } - стили ровно для планшетного диапазона.
@media (min-width: 768px), (max-width: 1024px) { ... } вместо `and` - из-за запятой это условие сработает почти всегда (любой экран либо шире 768px, либо уже 1024px), а не только в планшетном диапазоне.
Mobile-first: с какого экрана начинать вёрстку
Есть два способа организовать медиа-запросы. "Десктоп-first" (старый подход): сначала пишутся стили для широкого экрана, а потом набором `max-width`-запросов они постепенно урезаются для мобильных - код разрастается, потому что почти каждое десктопное правило приходится где-то переопределять. "Mobile-first" - обратный порядок: базовые стили (без единого @media) сразу пишутся для маленького экрана, а `min-width`-запросы только ДОБАВЛЯЮТ, а не переопределяют, стили для больших экранов. Этот подход как самостоятельную стратегию сформулировал Люк Вроблевски в книге "Mobile First" - и с тех пор он считается более аккуратным по умолчанию, особенно если сайт открывают в основном с телефонов.
.card { padding: 8px; } @media (min-width: 900px) { .card { padding: 24px; } } - mobile-first: базовый маленький отступ, увеличивается только на широких экранах.
.card { padding: 24px; } @media (max-width: 900px) { .card { padding: 8px; } } - desktop-first: тот же результат, но каждое такое правило на большом проекте приходится дублировать в паре "основное + переопределение".
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Думают, что правило внутри @media всегда побеждает обычное правило | На деле работает обычный каскад - порядок в коде и специфичность решают как обычно | Размещать медиа-запросы ПОСЛЕ базовых стилей и следить за специфичностью как всегда |
| Путают min-width и max-width | Стили применяются не на тех экранах, где задумано | min-width = "от этой ширины и шире", max-width = "до этой ширины и уже" |
| Ставят запятую вместо and | Получают логику ИЛИ вместо И - условие срабатывает почти всегда | and - оба условия сразу, запятая - любое одно из условий |
| Начинают вёрстку с десктопа | Код разрастается кучей max-width переопределений почти для каждого правила | Писать базовые стили для мобильного экрана, добавлять min-width для больших |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| min-width | стили от указанной ширины и шире |
| max-width | стили до указанной ширины и уже |
| and | оба условия одновременно (И) |
| , (запятая) | любое из условий (ИЛИ) |
| not | переворачивает весь медиа-запрос целиком, нужен тип устройства |
| mobile-first | базовые стили - для мобильных, min-width только добавляет стили для больших экранов |
Коротко: отвечаем на вопросы
Чем отличаются min-width и max-width в медиа-запросах?
min-width означает "эта ширина экрана и шире" - условие срабатывает на больших экранах. max-width означает "эта ширина и уже" - условие срабатывает на маленьких экранах. Их можно комбинировать через and, чтобы задать диапазон.
Что означает запятая между медиа-запросами?
Запятая работает как логическое ИЛИ: стили применятся, если выполняется хотя бы одно из перечисленных через запятую условий. Это не то же самое, что and, которое требует выполнения ВСЕХ условий одновременно.
Что такое подход mobile-first?
Это способ писать CSS, при котором базовые стили (без единого медиа-запроса) сразу рассчитаны на маленький мобильный экран, а медиа-запросы с min-width только добавляют дополнительные стили для более крупных экранов, а не переопределяют мобильные с нуля.
