Адаптивный дизайн и медиазапросы

Без одного метатега многие телефоны раскладывают страницу так, будто экран намного шире (MDN приводит в пример 980 пикселей), а потом уменьшают её, и медиазапрос для телефонов никогда не срабатывает.

Одна страница, любой экран

Адаптивный дизайн означает, что ты делаешь одну страницу, которая подстраивается под любой экран, от узкого телефона до широкого монитора, вместо отдельного мобильного сайта. Он держится на трёх идеях: раскладка из гибких ширин вместо фиксированных, медиафайлы, которые масштабируются внутри контейнеров, и медиазапросы, которые поправляют раскладку там, где она перестаёт работать. Flexbox и grid уже делают большую часть работы, как показали два последних урока с переносом карточек и столбцами auto-fill.

Метатег viewport

Многие телефоны отрисовывают страницы в виртуальной области просмотра шире экрана, MDN приводит в пример 980 пикселей, а затем уменьшают результат, потому что старые сайты делались для компьютеров. Странице, задуманной как адаптивная, это мешает: медиазапрос, который должен включаться при ширине меньше 600 пикселей, никогда не срабатывает, потому что браузер считает, что ширина экрана 980 пикселей. <meta name="viewport" content="width=device-width"> в head велит браузеру использовать настоящую ширину устройства в CSS-пикселях. Никогда не добавляй user-scalable=no или маленькое maximum-scale: MDN предупреждает, что запрет масштабирования отсекает людей со слабым зрением, а WCAG 1.4.4 ожидает, что текст можно увеличить до 200 процентов.

Гибкие ширины и изображения

Фиксированная ширина чаще всего вызывает горизонтальную прокрутку на телефонах. Предпочитай max-width вместо width: max-width: 70rem у обёртки страницы позволяет ей заполнить маленький экран и перестать расти на большом. Изображения по умолчанию сохраняют свой естественный размер в пикселях, поэтому фото шириной 1200 пикселей вылезает за пределы экрана в 390 пикселей. img { max-width: 100%; height: auto; } позволяет изображениям уменьшаться до размера контейнера с сохранением пропорций. WCAG 1.4.10, «Перекомпоновка», требует, чтобы содержимое работало при ширине 320 CSS-пикселей без прокрутки в двух направлениях; проверять страницу в окне шириной 320 пикселей полезно взять в привычку.

Медиазапросы

Медиазапрос оборачивает правила, которые действуют только при выполнении условия. @media (min-width: 600px) { ... } применяет свои правила, когда ширина области просмотра не меньше 600 пикселей. Обычный подход называется mobile first: сначала пишут базовые стили для узкого экрана, которые часто самые простые (один столбец, всё друг под другом), а затем добавляют запросы min-width, которые перестраивают раскладку по мере роста места. Выбирай контрольные точки там, где твоё содержимое начинает выглядеть плохо, а не угадывай популярные размеры устройств, ведь новые размеры экранов появляются каждый год. Если писать контрольные точки в em, например 40em, они ещё и реагируют, когда читатель увеличивает текст.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

О чём ещё может спросить запрос

Медиазапросы проверяют не только ширину. Признаки предпочтений читателя взяты из Media Queries Level 5: (prefers-color-scheme: dark) срабатывает, когда читатель выбрал тёмную тему в операционной системе, и можно автоматически предложить тёмные цвета. (prefers-reduced-motion: reduce) срабатывает, когда читатель попросил меньше движения, часто потому, что от анимации у него кружится голова; внутри этого запроса отключай крупные перемещения и эффекты параллакса. (hover: hover) из Level 4 сообщает, может ли основной указатель наводиться на элементы, а сенсорный экран этого не может. print оформляет страницу для бумаги, например скрывает меню. Наконец, clamp() плавно задаёт размеры без запроса: font-size: clamp(1.5rem, 4vw, 2.5rem) растёт вместе с экраном, но никогда не становится меньше 1.5rem или больше 2.5rem.