День 15 | Медиа-запросы и адаптивность
55 минЧто такое адаптивный дизайн?
Адаптивный дизайн (responsive design) — это подход, при котором сайт автоматически подстраивается под размер экрана устройства. Один и тот же сайт хорошо выглядит и на компьютере, и на планшете, и на телефоне.
Зачем это нужно?
- Больше половины пользователей заходят с мобильных устройств
- Google отдаёт предпочтение адаптивным сайтам в поиске
- Лучший пользовательский опыт на всех устройствах
Медиа-запросы (@media)
Медиа-запросы позволяют применять стили в зависимости от характеристик устройства (ширина экрана, тип устройства и т.д.).
Базовый синтаксис
@media (max-width: 768px) {
/* Стили для экранов меньше 768px */
.container {
padding: 10px;
}
}Разберём:
@media— начало медиа-запроса(max-width: 768px)— условие (ширина экрана меньше или равна 768px)- Внутри фигурных скобок — стили, которые применяются при выполнении условия
Типы условий
/* Ширина меньше или равна */
@media (max-width: 768px) { }
/* Ширина больше или равна */
@media (min-width: 768px) { }
/* Диапазон ширины */
@media (min-width: 768px) and (max-width: 1024px) { }
/* Высота экрана */
@media (max-height: 600px) { }
/* Ориентация */
@media (orientation: landscape) { } /* Альбомная */
@media (orientation: portrait) { } /* Портретная */Breakpoints (точки перелома)
Breakpoints — это стандартные размеры экранов, при которых меняется макет. Обычно используют:
// В _variables.scss
$breakpoint-mobile: 768px; // Мобильные
$breakpoint-tablet: 1024px; // Планшеты
$breakpoint-desktop: 1280px; // ДесктопыИспользование:
@media (max-width: $breakpoint-mobile) {
/* Стили для мобильных */
}
@media (min-width: $breakpoint-tablet) {
/* Стили для планшетов и больше */
}Mobile-first подход
Mobile-first означает, что мы сначала пишем стили для мобильных устройств, а затем расширяем их для больших экранов.
/* Базовые стили (для мобильных) */
.container {
padding: 15px;
font-size: 14px;
}
/* Планшеты и больше */
@media (min-width: 768px) {
.container {
padding: 30px;
font-size: 16px;
}
}
/* Десктопы */
@media (min-width: 1024px) {
.container {
padding: 40px;
max-width: 1200px;
margin: 0 auto;
}
}Преимущества mobile-first:
- Меньше CSS для мобильных (быстрее загрузка)
- Проще расширять, чем сжимать
- Соответствует реальности (большинство пользователей на мобильных)
Desktop-first подход
Desktop-first — противоположный подход: сначала стили для десктопов, потом уменьшаем для мобильных.
/* Базовые стили (для десктопов) */
.container {
padding: 40px;
max-width: 1200px;
}
/* Планшеты и меньше */
@media (max-width: 1024px) {
.container {
padding: 30px;
}
}
/* Мобильные */
@media (max-width: 768px) {
.container {
padding: 15px;
}
}Когда использовать: Если дизайн создавался сначала для десктопа, проще адаптировать desktop-first.
Адаптация навигации
На мобильных обычно используют бургер-меню вместо обычного горизонтального меню:
Адаптация Grid и Flexbox
Flexbox
.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
flex: 1 1 300px; /* Минимум 300px, растягивается */
}
/* Мобильные */
@media (max-width: 768px) {
.card {
flex: 1 1 100%; /* Полная ширина на мобильных */
}
}CSS Grid
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Планшеты */
@media (max-width: 1024px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Мобильные */
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr; /* Одна колонка */
}
}Адаптивная типографика
Размеры шрифтов тоже нужно адаптировать:
h1 {
font-size: 28px; /* Мобильные */
}
@media (min-width: 768px) {
h1 {
font-size: 36px; /* Планшеты */
}
}
@media (min-width: 1024px) {
h1 {
font-size: 48px; /* Десктопы */
}
}Или используя clamp() (современный способ):
h1 {
font-size: clamp(28px, 5vw, 48px);
/* Минимум 28px, идеал 5vw, максимум 48px */
}Viewport meta tag
Важно! В <head> должен быть правильный viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Без этого тега медиа-запросы могут работать неправильно на мобильных!
Практическое задание
- Создайте адаптивную навигацию (бургер-меню на мобильных)
- Адаптируйте Grid или Flexbox сетку (3 колонки → 2 → 1)
- Измените размеры шрифтов для разных экранов
- Адаптируйте отступы (padding, margin)
- Протестируйте на разных размерах экрана (DevTools в браузере)
Container Queries (современный подход)
Container Queries — это революционная фича CSS, которая позволяет применять стили в зависимости от размера контейнера, а не всего экрана. Это стандарт 2024-2026 годов!
Проблема с Media Queries
Media Queries реагируют на размер всего экрана. Но что если компонент должен адаптироваться к размеру своего контейнера, а не экрана?
Пример проблемы: У вас есть карточка товара. На десктопе она в сайдбаре (узкая), на мобильном — в основной колонке (широкая). С Media Queries сложно сделать так, чтобы карточка адаптировалась к ширине контейнера, а не экрана.
Решение: Container Queries
Container Queries позволяют применять стили в зависимости от размера родительского контейнера!
/* 1. Объявляем контейнер */
.card-container {
container-type: inline-size;
/* или container-type: size; (для ширины и высоты) */
}
/* 2. Используем @container вместо @media */
.card {
padding: 20px;
font-size: 16px;
}
/* Если контейнер уже 400px */
@container (max-width: 400px) {
.card {
padding: 15px;
font-size: 14px;
}
}
/* Если контейнер уже 300px */
@container (max-width: 300px) {
.card {
padding: 10px;
font-size: 12px;
}
}Именованные контейнеры
/* Объявление именованного контейнера */
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
/* Использование с именем */
@container sidebar (max-width: 300px) {
.card {
/* Стили для карточек в sidebar */
}
}Поддержка браузерами
Container Queries поддерживаются в:
- ✅ Chrome 105+ (с 2022 года)
- ✅ Firefox 110+ (с 2023 года)
- ✅ Safari 16.0+ (с 2022 года)
- ✅ Edge 105+
Вывод: Container Queries — это будущее адаптивности! Используйте их для адаптации компонентов к размеру контейнера, а Media Queries — для адаптации к размеру экрана.
Когда использовать что?
- Media Queries — для адаптации к размеру экрана (навигация, общий макет)
- Container Queries — для адаптации компонентов к размеру контейнера (карточки, виджеты)
Что дальше?
Отлично! Теперь вы знаете и Media Queries, и Container Queries. В следующих уроках мы будем верстать реальные блоки, применяя все изученные техники.