Адаптивность: media и container queries, единицы измерения

↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Mobile-first, единицы измерения и container queries — типовые вопросы по адаптивной вёрстке.

Объяснение

Обязательный мета-тег: <meta name="viewport" content="width=device-width, initial-scale=1">.

Mobile-first: базовые стили для маленьких экранов, расширения через min-width.

.grid { display: grid; gap: 12px; }
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-color-scheme: dark)   { :root { --bg: #111; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media (hover: hover) and (pointer: fine) { .btn:hover { … } }
 
/* Container queries: компонент реагирует на размер контейнера, а не окна */
.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) { .card { display: grid; grid-template-columns: 120px 1fr; } }

Единица	Относительно
px	пиксель CSS
rem	размер шрифта корня (масштабируется настройками пользователя)
em	размер шрифта элемента/родителя
%	родитель
vw/vh, dvh/svh/lvh	размер viewport (dvh учитывает динамические панели мобильных)
ch	ширина символа «0»
fr	доля в grid

Гибкая типографика: font-size: clamp(1rem, 2.5vw, 1.5rem); min(), max(), clamp() для размеров без media queries.

Адаптивные изображения — srcset/picture (см. Изображения и медиа: srcset, picture, lazy loading).

Нюансы и подводные камни

• 100vh на мобильных включает область под адресной строкой: используйте dvh.
• Отдельные «брейкпоинты под устройства» устаревают — ориентируйтесь на контент.
• Шрифты в px ломают масштабирование пользователем: используйте rem.
• Проверяйте касание: размер тач-целей от 44×44 px.
• Горизонтальный скролл на мобильных — обычно из-за элемента с фиксированной шириной.

Практика

1. Сверстайте страницу mobile-first с тремя брейкпоинтами.
2. Замените несколько media queries на clamp() и auto-fit.
3. Сделайте карточку с container query.

Вопросы с ответами

Что такое mobile-first?

Подход, где базовые стили — для мобильных, а более широкие экраны добавляются через min-width.

Container query или media query?

Container query привязан к размеру контейнера — лучше для переиспользуемых компонентов.

rem или em?

rem относится к корню и предсказуем; em — к родителю, полезен внутри компонента.

Связанные темы

• Grid
• CSS-переменные