Брейкпойнт это не ширина конкретного айфона, а точка, на которой макет перестаёт нормально читаться. Показываем набор из шести значений, по которому делаем адаптивную вёрстку сайта, и разбираем места, где она ломается чаще всего.
Разговор обычно начинается одинаково. Заказчик открывает сайт на телефоне, видит съехавшую таблицу цен и пишет: "на моём айфоне всё разъехалось, подгоните под него". Правим под эту модель, через неделю приходит скриншот с планшета, и там картина другая.
Подгонять под устройства бесполезно: моделей сотни, разрешения меняются каждый год, а на планшете браузер может быть открыт в половину экрана. Смотреть надо не на устройства, а на содержимое.
Что такое брейкпойнт и почему его выбирают по контенту
Брейкпойнт это ширина окна, на которой включается другой набор правил: сетка перестраивается, меняются размеры шрифтов и отступов, меню сворачивается в бургер. Технически это обычное условие в CSS.
Значения выбирают по тому, где ломается конкретный макет. Метод примитивный и рабочий: открыть страницу на широком экране и медленно тянуть край окна влево, глядя на содержимое.
Пример из недавнего проекта. Сетка из трёх карточек услуг держится до 1024 пикселей. Ниже третья карточка сжимается до 240 пикселей, заголовок "Разработка интернет-магазина" переносится в четыре строки, и карточка становится вдвое выше соседних. Здесь и стоит точка перехода на две колонки: не потому, что тут начинается планшет, а потому, что тут разваливается вёрстка.
Разницу между адаптивом и отдельным мобильным сайтом разбирали в статье про адаптивную вёрстку и мобильную версию. Тут речь только про адаптив: один адрес, один код, разное отображение.
Наш рабочий набор из шести значений
Набор сложился за несколько лет и подходит для лендингов, корпоративных сайтов и каталогов.
| Ширина | Что меняется |
|---|---|
| до 720 px | Одна колонка, бургер-меню, кнопки и картинки на всю ширину |
| 720 px | Карточки в две колонки, боковое оглавление статьи залипает при прокрутке |
| 768 px | Растут вертикальные отступы секций и размер заголовков |
| 1024 px | Три колонки в сетках, первый экран делится на текст и картинку |
| 1100 px | Верхнее меню перестаёт тесниться, возвращаются полные подписи |
| 1200 px | Контейнер фиксируется, дальше растут только поля по краям |
Значения 720 и 768 стоят рядом намеренно: на 720 меняется раскладка, на 768 только дыхание макета. Сводить их в одну точку мы пробовали, получалось либо тесно на 730 пикселях, либо пусто на 760.
Верхняя граница нужна, чтобы строка текста не растягивалась на 24-дюймовый монитор. Комфортная длина строки 60-80 знаков, без ограничения контейнера на широком экране выходит около 200, и текст перестают читать. Набор точек стоит зафиксировать один раз на весь проект, как и остальные общие решения из дизайн-системы сайта.
Mobile first: что это даёт на практике
Mobile first означает, что базовые стили пишутся под узкий экран, а дальше идут добавки для широких. Не наоборот.
Когда верстают сначала десктоп, а потом прячут лишнее для телефона, мобильный посетитель всё равно загружает скрытые блоки и стили обеих версий. Когда идут от узкого экрана, лишнее просто не появляется.
Второй эффект важнее. На 360 пикселях помещается один заголовок, одна мысль и одна кнопка, и это заставляет расставить приоритеты в контенте. По нашим проектам доля мобильного трафика держится в пределах 60-75%, у услуг для частных лиц доходит до 85%. Начинать с десктопа при таких цифрах странно.
Восемь мест, где адаптив ломается чаще всего
Таблицы. Главный источник горизонтального скролла всей страницы. Таблица должна скроллиться внутри себя, а ячейкам запрещают перенос, иначе колонка с ценой вытягивается в столбик по одному символу.
Длинные заголовки и слова. "Экспресс-лендинг" на узком экране рвётся по дефису в неудачном месте, лечится неразрывным дефисом. Длинный термин без пробелов вылезает за край, если не разрешить перенос по буквам.
Карточки в три колонки. На 1000 пикселях третья колонка становится нечитаемой раньше, чем сработает переключение. Проверять надо не на самом брейкпойнте, а на 20 пикселях выше.
Фиксированная шапка. Липкое меню высотой 73 пикселя в альбомной ориентации съедает пятую часть экрана. И переход по якорю прячет заголовок под шапкой, если не заложить компенсирующий отступ.
Модальные окна. На телефоне окно занимает почти весь экран и скроллится само, страница под ним не прокручивается. Отдельная беда с клавиатурой: окно высотой в экран обрезается ровно по кнопке отправки.
Формы. Поле со шрифтом меньше 16 пикселей заставляет Safari на iOS приближать страницу при фокусе. Посетитель попадает в поле, экран прыгает, обратно он уже не отдаляется.
Карты и виджеты. Iframe приходит с фиксированной шириной и вылезает за контейнер. Оборачиваем в блок с заданным соотношением сторон, внутри растягиваем на всю ширину.
Длинные ссылки и почтовые адреса. В тексте они не переносятся и разрывают макет. Правило переноса длинных строк ставится один раз на весь контентный блок.
Больше поломок, которые заметны только с телефона, собрано в разборе ошибок мобильной версии.
Единицы измерения: где пиксели допустимы, а где нет
Фиксированный размер текста в пикселях игнорирует системную настройку шрифта. Человек с плохим зрением выставил крупный шрифт, а сайт всё равно показывает свои 14 пикселей.
- Размер текста и межстрочный интервал в относительных единицах от базового размера.
- Отступы из фиксированного набора значений с шагом 4 пикселя: так вёрстка предсказуема.
- Ширины блоков в процентах или долях сетки. Фиксированные 400 пикселей на экране 360 дают скролл сразу.
- Максимальные ширины в пикселях допустимы: контейнер 1200, картинка не больше 460.
- Фиксированная высота у блока с текстом почти всегда ошибка: реальный текст длиннее макетного.
Отдельная история с высотой в размер экрана. На мобильном адресная строка появляется и исчезает при прокрутке, высота меняется на лету, и первый экран лучше задавать с запасом или единицей, которая учитывает эту панель.
