Вёрстка mobile-first

Что это такое

Вёрстка mobile-first означает, что таблица стилей сначала пишется для самого узкого экрана, а правила для более широких добавляются потом. Базовые стили описывают одну колонку содержимого; медиа-запросы добавляют колонки, боковые панели и лишнее оформление по мере появления места. Специфичного для телефонов в самой технике нет. Это направление движения, от стеснённого случая к просторному.

Почему это важно

Раскладка, написанная узкой первой, проще на обоих концах. Базовые правила — те, что должны быть верны всегда, поэтому отменять унаследованную настольную раскладку не приходится, и !important не нужен, чтобы перебить объявление, сделанное триста строк назад. Это ещё и заставляет выстроить иерархию содержимого: если страница должна иметь смысл в одной колонке, вы обязаны решить, что важнее всего, — хорошее решение, принятое до того, как у вас появилось три колонки, чтобы это распределить. И поскольку узкие стили скачиваются и применяются первыми, телефон получает полную раскладку, ещё не разобрав ни одного широкоэкранного правила.

Ключевые идеи

Базовый слой — это узкая раскладка

Начните с того, что каждый элемент стоит в одной колонке в порядке исходника. Без float, без ширины, без многоколоночной сетки: просто читаемый поток с разумной типографикой и отступами. Этот слой — ещё и запасной вариант, если запрос не применится, поэтому он должен быть полным сам по себе, а не просто безобидным.

.article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

Добавляйте возможности через `min-width`, в порядке чтения

Каждый запрос добавляет одну возможность, а порядок запросов совпадает с порядком правил, которые они добавляют. Поэтому читатель может прокрутить файл и увидеть, как раскладка растёт, а поздний запрос всегда побеждает, потому что идёт позже по исходнику с той же специфичностью.

@media (min-width: 40rem) {
  .article { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 70rem) {
  .article { padding: 2rem 3rem; }
}

Выбирайте каждую точку перелома по содержимому

Сужайте окно, пока строка не станет неудобно длинной или два столбца не перестанут помещаться. Эта ширина и есть точка перелома. Запишите в комментарии, почему она существует: это удержит того, кто придёт следом, от удаления её как произвольной.

Сначала перестройте поток, и меняйте порядок только когда смысл позволяет

Скрыть второстепенную колонку на узком экране нормально, однако увести основное содержимое ниже декоративной врезки — нет, потому что порядок чтения и порядок исходника расходятся, и пользователи клавиатуры и скринридера получают неверную последовательность. Если визуальный порядок действительно нужно изменить, проверяйте порядок в DOM, а не порядок отрисовки.

Проверяйте на крайних ширинах и между ними

Раскладка, работающая на 320px и на 1440px, всё ещё может сломаться на 640px. Тяните край окна медленно, а не прыгайте между именованными ширинами, и проверьте настоящий телефон в режиме устройства браузера.

Практика

Перепишите настольную раскладку узкой первой

Возьмите существующую страницу, таблица стилей которой начинается с широкой двухколоночной раскладки. Напишите новую базу от узкого экрана, добавляя по одному запросу на каждую возможность. Сохраните исходный файл и сравните число правил и использование !important.

Готово, когда: в новой таблице стилей нет !important, обе версии выглядят одинаково на самой широкой проверенной вами ширине, и узкая версия — файл короче.

Найдите и обоснуйте три точки перелома

Выберите страницу и отметьте ширины, на которых раскладка перестаёт работать. Добавьте запрос на каждой ширине и напишите однострочный комментарий о том, какой элемент содержимого её вызвал.

Готово, когда: удаление любого одного комментария не даёт читателю понять, зачем существует его запрос, и ни один запрос не стоит без причины.

Частые ошибки

Сначала пишут настольную раскладку — каждое узкое правило обязано отменять широкое, и файл удваивается; исправить: поместите одноколоночную раскладку в базу и добавляйте колонки запросами min-width.
max-width-запросы как основной механизм — узкий телефон и суженное настольное окно получают разные правила; исправить: оставьте max-width для настоящих исключений и стройте на min-width.
Скрытие содержимого на маленьких экранах — для многих пользователей содержимое исчезает, а не просто переносится; исправить: перестройте его в одну колонку и скрывайте только оформление.
Изменение порядка через flexbox или grid против порядка DOM — визуальный порядок и порядок табуляции расходятся, и вспомогательные технологии читают неверную последовательность; исправить: меняйте порядок в разметке.
Проверка только двух размеров окна — раскладка ломается посередине, где граница запроса неверна; исправить: тяните край окна непрерывно и проверьте настоящее устройство.

Что читать дальше

Каскадные таблицы стилей (CSS) (02-frontend/05-css) — каскад, блочная модель и запросы, которые этот урок предполагает уже знакомыми.
Плавная типографика и отступы (02-frontend/10-responsive-web-design/02-fluid-type-and-spacing) — дополнение к точкам перелома: размеры, которые адаптируются без них.
Доступность (WCAG / a11y) (02-frontend/11-accessibility-wcag-a11y) — требования к перестройке потока и масштабированию, которые ограничивают то, что может делать адаптивная раскладка.