Адаптивная вёрстка: базовые правила

Главное правило

Начинайте с узкого экрана, а не с широкого. Так проще: сначала делаете простую одноколоночную раскладку, потом добавляете сложность для больших экранов.

Обратный путь мучительнее: раскладку, придуманную под широкий монитор, приходится ломать, чтобы уместить в телефон.

Три вещи, без которых ничего не работает

Указание области просмотра. Строка в шапке документа, без которой мобильный браузер притворяется широким экраном и уменьшает всю страницу. Забывают её удивительно часто.

<meta name="viewport" content="width=device-width, initial-scale=1">

Гибкие размеры вместо жёстких. Ширина в процентах или долях доступного места вместо фиксированных пикселей.

Картинки, которые не вылезают. Одно правило, спасающее от горизонтальной прокрутки:

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

Точки переключения

Правила, которые применяются начиная с определённой ширины:

.layout { display: block; }

@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 240px 1fr;
  }
}

Здесь до 768 пикселей всё в одну колонку, после — боковая колонка и содержимое.

Сколько точек нужно. Обычно две-три: телефон, планшет, широкий экран. Пять и больше — признак того, что раскладку стоило продумать иначе.

Где ставить. Не под конкретные модели устройств, а там, где раскладка начинает выглядеть плохо. Растягивайте окно и смотрите, где ломается — там и точка.

Что часто забывают

Область касания. Кнопка размером с иконку удобна мышью и неудобна пальцем. Минимум примерно сорок пикселей на сторону.

Горизонтальную прокрутку. Один элемент шире экрана — и вся страница ездит вбок. Ищется просмотром на телефоне.

Длинные слова и ссылки. Разрывают раскладку на узких экранах. Лечится правилом переноса.

Фиксированные высоты. На телефоне текста больше по высоте, и содержимое обрезается.

Шапку, занимающую пол-экрана. На мониторе выглядит солидно, на телефоне не оставляет места для содержимого.

Современные возможности

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

Такой подход надёжнее, потому что не зависит от конкретных ширин. Стоит использовать, где получается.

Как проверять

На настоящем телефоне. Обязательно. Уменьшенное окно браузера не показывает ни касаний, ни особенностей мобильных браузеров, ни реального размера шрифтов.

На широком мониторе. Обратная беда: страница, растянутая на два метра, где строка текста идёт через весь экран и её невозможно читать. Ограничивайте максимальную ширину содержимого.

С увеличенным шрифтом. Часть людей ставит в системе крупный шрифт. Вёрстка на жёстких пикселях у них ломается.

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

Страница, пережившая эти четыре проверки, готова к реальным посетителям.