Содержание · 7
Как выбирать точки перелома, почему не стоит привязываться к моделям устройств и как проектировать раскладку, которая работает на любой ширине.
Брейкпоинты задаёт контент, а не устройства
Привязка точек перелома к моделям телефонов бессмысленна: устройства меняются каждый год, а диапазон ширин непрерывен. Правильный подход — растягивать раскладку и ставить точку перелома там, где она начинает выглядеть плохо.
На практике получается три-четыре точки, и они обычно оказываются близки к общепринятым значениям — но выведены из контента, а не скопированы.
Mobile-first — это про порядок мышления
Проектирование от узкого экрана заставляет расставить приоритеты: на 375 пикселях не помещается всё, и приходится решать, что важнее. Расширяя раскладку, вы добавляете, а не отрезаете.
Обратный путь — от десктопа к мобильному — обычно заканчивается тем, что половина элементов просто прячется, и мобильная версия оказывается урезанной.
Раскладки без медиазапросов
Современный CSS позволяет строить гибкие сетки, которые адаптируются сами: колонки минимальной ширины с автозаполнением, гибкие переносы, размеры через clamp.
Такие раскладки работают на любой ширине, включая те, о которых вы не думали, — например, в узком окне рядом с другим приложением.
Типографика и изображения
Размеры шрифтов через clamp избавляют от необходимости переопределять их на каждом брейкпоинте. Ключевое требование — заголовки должны уменьшаться сильнее, чем основной текст.
Изображения требуют не только адаптивных размеров, но иногда и разного кадрирования: горизонтальный кадр, обрезанный до вертикального на мобильном, часто теряет главное.
- Размеры через clamp вместо переопределения на каждой точке.
- Разное кадрирование для горизонтальных и вертикальных экранов.
- Атрибут sizes у изображений, соответствующий реальной раскладке.
- Проверка на 320 px — минимальной актуальной ширине.
Точки перелома задаёт содержимое, а не список моделей телефонов. Ломать макет надо там, где строка стала неудобной.
Точка перелома там, где ломается макет
Привязывать точки перелома к моделям устройств бессмысленно: их размеры меняются каждый год, а окно браузера на десктопе бывает любой ширины. Точка нужна там, где текущая раскладка перестаёт работать — строка становится слишком длинной, карточка слишком узкой, меню не помещается.
Практический способ найти их: растягивать окно и смотреть, где становится плохо. Обычно таких мест три-четыре, и они не совпадают с круглыми числами вроде 768 и 1024.
Что позволяет обойтись меньшим числом точек
- Резиновые единицы для типографики:
clampзаменяет три точки перелома одной формулой. - Сетка с автоподбором числа колонок под минимальную ширину карточки.
- Контейнерные запросы: компонент реагирует на свой размер, а не на размер окна.
- Логические свойства и
min()/max()вместо парных правил для узкого и широкого.
Что в итоге
Брейкпоинты выводятся из контента: растяните раскладку и поставьте точку там, где она ломается.
Гибкие сетки и clamp сокращают количество точек перелома до минимума и работают на ширинах, которых вы не предусмотрели.
Коротко
- Сколько точек перелома нужно?
- Столько, сколько раз ломается вёрстка, — обычно три-четыре. Привязывать их к моделям устройств бессмысленно: точка нужна там, где макет перестаёт работать, а не там, где выходит новый телефон.
- Начинать с мобильного или с десктопа?
- С мобильного: узкий экран заставляет расставить приоритеты, и расширять готовую иерархию проще, чем сокращать сложную. Обратный порядок обычно кончается «мобильной версией» с урезанным содержанием.
Формы на мобильном
Правильный тип клавиатуры, работающее автозаполнение и ошибки, которые видно. Разбираем детали, из-за которых мобильные формы бросают чаще десктопных.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…