@media — правило CSS, которое применяет стили только при выполнении условия: определённой ширине экрана, ориентации, цветовой схеме. Это основа адаптивной вёрстки.
Содержание
- Синтаксис @media
- meta viewport — обязательный тег
- Breakpoints — стандартные точки перелома
- Mobile First — современный подход
- Другие медиа-условия
- Практический пример — адаптивный макет страницы
- Адаптивность без @media — Grid и Flexbox
- Часто задаваемые вопросы о медиазапросах
- Почему @media не работает на мобильных?
- Какие breakpoints использовать в 2025 году?
- Можно ли обойтись без медиазапросов?
Синтаксис @media
@media условие {
/* CSS применяется только когда условие = true */
}
/* max-width — для экранов ДО указанной ширины (включительно) */
@media (max-width: 768px) {
.sidebar { display: none; } /* скрыть на мобильных */
}
/* min-width — для экранов ОТ указанной ширины */
@media (min-width: 768px) {
.container { display: grid; grid-template-columns: 250px 1fr; }
}
/* Диапазон — от и до */
@media (min-width: 480px) and (max-width: 767px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* Логическое ИЛИ */
@media (max-width: 480px), (orientation: landscape) {
.hero { height: auto; }
}
/* Медиатип (screen, print, all) */
@media screen and (min-width: 768px) { ... }
@media print { ... }
meta viewport — обязательный тег
Без этого тега мобильный браузер имитирует широкий экран и медиазапросы не работают как ожидается.
<!-- Добавь в <head> — без этого @media на мобильных не работает -->
<meta name="viewport" content="width=device-width, initial-scale=1">
Breakpoints — стандартные точки перелома
| Breakpoint | Ширина | Устройства |
|---|---|---|
| xs (mobile) | < 480px | Маленькие телефоны |
| sm | 480px – 639px | Большие телефоны |
| md | 640px – 767px | Планшеты (Portrait) |
| lg | 768px – 1023px | Планшеты (Landscape), нетбуки |
| xl | 1024px – 1279px | Небольшие десктопы |
| 2xl | 1280px+ | Десктопы и большие мониторы |
/* Стандартные breakpoints (Tailwind CSS подход) */
/* По умолчанию — мобильные (< 640px) */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px){ /* lg */ }
@media (min-width: 1280px){ /* xl */ }
@media (min-width: 1536px){ /* 2xl */ }
/* Bootstrap подход */
@media (min-width: 576px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 992px) { /* lg */ }
@media (min-width: 1200px) { /* xl */ }
@media (min-width: 1400px) { /* xxl */ }
/* Совет: используй CSS переменные для breakpoints */
/* Хотя в условии @media var() не работает,
можно хранить их в :root как документацию */
Mobile First — современный подход
Mobile First: базовые стили пишутся для мобильных, потом добавляются стили для больших экранов через min-width. Это лучше для производительности на мобильных — браузер не загружает лишние правила.
/* ❌ Desktop-first (устаревший подход) */
.grid {
grid-template-columns: repeat(3, 1fr); /* начали с десктопа */
}
@media (max-width: 1024px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; } /* переопределяем для мобильных */
}
/* ✅ Mobile-first (современный подход) */
.grid {
grid-template-columns: 1fr; /* начинаем с мобильных */
}
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); } /* добавляем для больших */
}
/* Пример: типографика */
h1 {
font-size: 1.75rem; /* мобильные */
}
@media (min-width: 768px) {
h1 { font-size: 2.5rem; } /* планшеты и выше */
}
@media (min-width: 1024px) {
h1 { font-size: 3rem; } /* десктопы */
}
Другие медиа-условия
/* Ориентация устройства */
@media (orientation: portrait) {
/* Вертикальная ориентация */
.photo-grid { grid-template-columns: 1fr; }
}
@media (orientation: landscape) {
/* Горизонтальная */
.photo-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Тёмная тема ОС */
@media (prefers-color-scheme: dark) {
:root {
--bg: #111827;
--text: #f9fafb;
}
}
/* Светлая тема ОС */
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--text: #111827;
}
}
/* Анимации отключены в ОС (accessibility) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Стили для печати */
@media print {
nav, .sidebar, .ads, footer { display: none; }
body { font-size: 12pt; color: black; background: white; }
a { color: black; text-decoration: underline; }
a[href]::after { content: " (" attr(href) ")"; } /* показать URL */
img { max-width: 100%; }
}
/* Retina / высокое разрешение */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
.logo {
background-image: url('logo@2x.png');
background-size: contain;
}
}
/* Hover поддержка (есть ли мышь) */
@media (hover: hover) {
.card:hover { transform: translateY(-4px); }
/* Только на устройствах с мышью — не срабатывает на тачскрине */
}
Практический пример — адаптивный макет страницы
/* Мобильные (по умолчанию) */
.page {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 16px;
padding: 16px;
}
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
/* Планшеты */
@media (min-width: 768px) {
.page {
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main "
"footer footer";
gap: 24px;
padding: 24px;
}
}
/* Десктоп */
@media (min-width: 1024px) {
.page {
max-width: 1200px;
margin: 0 auto;
gap: 32px;
}
}
/* Навигация: гамбургер на мобильных, горизонтальная на десктопе */
.nav-links { display: none; }
.hamburger { display: block; }
@media (min-width: 768px) {
.nav-links {
display: flex;
gap: 24px;
list-style: none;
}
.hamburger { display: none; }
}
Адаптивность без @media — Grid и Flexbox
/* CSS Grid auto-fill — адаптивные колонки без медиазапросов */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
/* Сам считает сколько колонок влезет, без @media */
/* Flexbox с wrap */
.flex-cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.flex-cards > * {
flex: 1 1 280px; /* grow shrink base */
/* Минимум 280px, дальше тянется */
}
/* clamp() для адаптивной типографики */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* Мин 1.5rem, идеально 4vw, макс 3rem */
/* Без медиазапросов! */
}
Часто задаваемые вопросы о медиазапросах
Почему @media не работает на мобильных?
Скорее всего отсутствует тег <meta name="viewport">. Без него мобильные браузеры масштабируют страницу под «виртуальную» ширину 980px и медиазапросы не срабатывают при реальной ширине экрана. Добавь в <head>: <meta name="viewport" content="width=device-width, initial-scale=1">.
Какие breakpoints использовать в 2025 году?
Нет жёстких стандартов, но де-факто стандарт — Tailwind CSS breakpoints: 640px, 768px, 1024px, 1280px. Практический совет: не привязывайся к конкретным устройствам, а добавляй breakpoint там, где верстка «ломается». Открой сайт и плавно уменьшай окно — видишь что-то некрасивое? Вот и breakpoint. Обычно хватает 2-3 breakpoints для большинства сайтов.
Можно ли обойтись без медиазапросов?
Частично — да. CSS Grid + auto-fill + minmax() делает сетки адаптивными без медиазапросов. clamp() — адаптивная типографика. flex-wrap + flex-basis — гибкие карточки. Но для скрытия целых блоков, смены раскладки (2 колонки → 1), адаптации навигации — медиазапросы нужны. Лучший подход: сначала используй intrinsic design (Grid, clamp, flexbox), добавляй @media только когда без них не обойтись.
