Коротко: медиазапрос пишут так: @media (max-width: 768px) { … } — стили внутри применяются только при подходящей ширине экрана. Для адаптива чаще используют min-width и подход mobile first: базовые стили для мобильных, а расширения — для широких экранов.
Синтаксис
| Условие | Когда срабатывает |
|---|---|
max-width |
экран уже указанной ширины |
min-width |
экран шире указанной ширины |
orientation |
портрет или альбом |
and |
несколько условий вместе |
Базовые примеры
/* мобильные: одна колонка */
.grid { grid-template-columns: 1fr; }
/* планшет и шире */
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* десктоп и шире */
@media (min-width: 1200px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}Такой порядок — от узкого к широкому — называется mobile first. Он проще и надёжнее, чем писать отдельные правила «сверху вниз».
Вкладки: приёмы
@media (min-width: 600px) and (max-width: 900px) {
/* только для планшетов */
}Диапазон задают двумя условиями через and. Используйте редко: обычно достаточно одного min-width.
@media (max-width: 768px) {
.sidebar { display: none; }
.burger { display: block; }
}На мобильном боковую панель часто скрывают, а вместо неё показывают кнопку меню. Главное — не потерять доступ к важному контенту.
@media (prefers-reduced-motion: reduce) {
* { animation: none; transition: none; }
}Запрос уважает настройку «уменьшить движение»: пользователи с чувствительностью к анимации получат спокойный интерфейс.
<head> медиазапросы на мобильных работать не будут: телефон отобразит страницу в масштабе десктопа. Добавьте <meta name="viewport" content="width=device-width, initial-scale=1">.Практика: написать медиазапрос
- Проверьте наличие метатега viewport.
- Напишите базовые стили для мобильных.
- Добавьте
@media (min-width: 768px)для планшетов. - Добавьте запрос для широких экранов.
- Проверьте вёрстку, меняя ширину окна.
- Не забывайте про промежуточные размеры.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Запросы не работают | нет метатега viewport | добавить в head |
| Стили не применяются | запрос выше базовых | поставить после основных |
| Правила конфликтуют | одинаковая специфичность | соблюдать порядок |
| Много запросов | нет общей системы | выбрать 2–3 точки |
| Ломается между точками | жёсткие размеры | использовать проценты |
Проверьте себя
Вопросы и ответы
Обычно min-width в подходе mobile first: сначала мобильные стили, потом расширения. max-width удобен, когда нужно точечно переопределить что-то на узких экранах.
Две-три: например 600px, 900px и 1200px. Больше точек усложняет поддержку. Точно выбранных значений из «модных» списков не существует — берите по своему макету.
Проверьте три вещи: метатег viewport, порядок правил (запрос должен идти после базовых стилей) и специфичность селекторов.
Медиазапрос, учитывающий системную настройку «уменьшить движение». Если она включена, анимации отключают или делают мягче — это забота о пользователях с чувствительностью к движению.
Итоги
- Медиазапрос пишут через
@mediaс условием по ширине. - Mobile first строится на
min-width. - Без метатега viewport запросы на мобильных не работают.
- Хватает двух-трёх точек перелома.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.