Адаптив. Медиа-запросы
Адаптив — это способность сайта подстраиваться под разные размеры экрана: от больших мониторов до маленьких телефонов. Достигается с помощью медиа-запросов.
1. viewport — настройка области просмотра
Без этого тега мобильные браузеры будут показывать страницу как на десктопе (уменьшенную). Нужно добавить в <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Это говорит браузеру: «Ширина страницы равна ширине экрана, масштаб 100%».
2. Синтаксис медиа-запроса
Медиа-запрос позволяет применять CSS только при определённых условиях (например, при ширине экрана меньше 768px).
@media (условие) {
/* CSS-правила, которые сработают только при выполнении условия */
}3. Важное замечание про пиксели на современных телефонах
Современные телефоны имеют очень высокое разрешение экрана. Например, у iPhone 13 — 1170x2532 пикселя. Но это физические пиксели.
В CSS мы работаем с логическими пикселями (CSS-пикселями). Браузер сам пересчитывает физические пиксели в логические так, чтобы сайт выглядел примерно одинаково на разных устройствах. Поэтому даже на самом дорогом телефоне ширина экрана в CSS-пикселях будет около 375–430px.
Это сделано специально: чтобы сайт, который хорошо выглядит на старом iPhone SE (320px), нормально смотрелся и на новом флагмане. Вы пишете адаптив под логические размеры (320px, 768px, 1024px), а браузер сам масштабирует картинку под реальный экран.
4. max-width — для десктоп-first подхода
Сначала пишем стили для больших экранов, потом для меньших.
Пример 1: изменение цвета фона
/* Стили для широких экранов (десктоп) */
body {
background-color: white;
}
@media (max-width: 1024px) {
body {
background-color: #f0f0f0;
}
}
@media (max-width: 768px) {
body {
background-color: #e0e0e0;
}
}
@media (max-width: 480px) {
body {
background-color: #ccc;
}
}Попробуйте изменить ширину окна браузера — фон будет темнеть при уменьшении экрана.
Пример 2: изменение размера шрифта
h1 {
font-size: 32px;
}
@media (max-width: 768px) {
h1 {
font-size: 24px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 18px;
}
}Пример 3: скрытие элемента на маленьких экранах
.sidebar {
display: block;
}
@media (max-width: 768px) {
.sidebar {
display: none; /* скрываем боковую панель на телефонах */
}
}max-width для меньших.
5. min-width — для mobile-first подхода
Сначала пишем стили для телефонов, потом для больших экранов.
/* Стили для всех экранов (телефон) */
.container {
display: flex;
flex-direction: column;
gap: 10px;
}
/* При ширине экрана 768px и больше */
@media (min-width: 768px) {
.container {
flex-direction: row;
gap: 20px;
}
}
/* При ширине экрана 1024px и больше */
@media (min-width: 1024px) {
.container {
gap: 30px;
}
}min-width для больших. Рекомендуется современными стандартами.
6. Точки перелома (breakpoints)
Стандартные размеры экранов, при которых обычно меняется дизайн (логические CSS-пиксели):
- 320px – 480px — маленькие телефоны (iPhone SE, Samsung Galaxy A)
- 481px – 768px — телефоны (портрет) и маленькие планшеты
- 769px – 1024px — планшеты (ландшафт) и маленькие ноутбуки
- 1025px – 1200px — десктоп (большинство ноутбуков)
- 1201px и больше — широкие мониторы
Эти размеры — не жёсткое правило, а проверенная отправная точка. Вы сами решаете, где менять дизайн.
7. Пример: адаптивная сетка карточек
На телефоне — одна колонка, на планшете — две, на десктопе — три.
.card-grid {
display: grid;
grid-template-columns: 1fr; /* одна колонка на телефоне */
gap: 15px;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr); /* две колонки */
}
}
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: repeat(3, 1fr); /* три колонки */
}
}▶ При ширине экрана менее 768px — одна колонка. При 768px и более — две колонки. При 1024px и более — три колонки.