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

Что значит адаптивность

Адаптивность (responsive) = один и тот же HTML хорошо выглядит и на телефоне шириной 360px, и на мониторе 2560px. Вы не делаете два сайта — вы делаете раскладку, которая подстраивается.

Три инструмента: гибкие единицы, media / container queries и резиновые раскладки (flex, grid).

Единицы — виды и когда их использовать

Media queries

.grid { grid-template-columns: 1fr; }

@media (min-width: 48rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

Mobile-first: сначала пишете стили для маленьких экранов, затем добавляете через min-width. Код проще, а мобильные (большая часть трафика) загружают меньше CSS.

Другие полезные media queries: (prefers-color-scheme: dark), (prefers-reduced-motion: reduce), (hover: hover).

Container queries

Media queries смотрят на экран, container queries — на родителя. Карточка, которая используется и в узком сайдбаре, и на широкой странице, подстраивается сама:

.card-wrapper { container-type: inline-size; }

@container (min-width: 30rem) {
  .card { display: flex; }
}

Плавная типографика с clamp()

h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }

clamp(минимум, предпочтительное, максимум) — плавно растёт вместе с экраном, но не выходит за пределы. Без десятков брейкпоинтов.

CSS-переменные (custom properties)

:root { --space: 1rem; --brand: #1f5fbf; }
.btn { padding: var(--space); background: var(--brand); }

@media (min-width: 64rem) {
  :root { --space: 1.5rem; }    /* все отступы растут одной строкой */
}

В отличие от переменных Sass, CSS-переменные живут в браузере: наследуются, меняются во время работы и внутри media queries. На них построены темы в Tailwind.

Адаптивные изображения

img { max-width: 100%; height: auto; }

next/image автоматически генерирует несколько размеров (srcset) и выбирает подходящий для экрана.

Коротко

• rem для текста и отступов, px для деталей, dvh на мобильном.
• Mobile-first через min-width; container queries для компонентов.
• clamp() для плавной типографики, CSS-переменные для токенов.

Официальные источники

• MDN — Responsive design
• MDN — CSS values and units
• MDN — Container queries
• MDN — Using CSS custom properties