Адаптивная верстка — это не просто «чтобы сайт сжимался». Это продуманная система решений, где интерфейс меняется осознанно, логично и вовремя. В центре этой системы стоят breakpoints — те самые переломные точки, в которых сайт меняет свою раскладку, поведение и иногда даже смысл. Давай разберёмся глубоко и по-взрослому, как они работают и как использовать их правильно.
Что такое Breakpoint
Breakpoint — это условие, при котором раскладка сайта переключается с одной версии на другую. Чаще всего брейкпоинты реализуются с помощью media queries и зависят от ширины (реже — высоты) viewport.
Проще говоря:
Breakpoint — это момент, когда текущий дизайн «перестаёт работать» и требует изменений.
Классические значения брейкпоинтов исторически привязаны к популярным устройствам:
- 1024px — планшеты и небольшие ноутбуки;
- 768px — планшеты в портретной ориентации;
- 480px — мобильные устройства;
- 320px — минимальная мобильная ширина.
Но важно понимать: эти числа — не закон, а ориентир.
Как правильно выбирать breakpoints
Распространённая ошибка — использовать всегда один и тот же набор точек, не глядя на макет.
Гораздо более профессиональный подход:
- Анализировать контент и его поведение;
- Добавлять breakpoint там, где верстка ломается;
- Исходить из логики дизайна, а не из списка устройств.
📌 Хороший breakpoint — это не размер экрана, а момент дискомфорта интерфейса.
Mobile First: философия, а не техника
Mobile first — это подход, при котором дизайн и верстка начинаются с самого маленького экрана, а затем постепенно усложняются для больших устройств.
В чём суть подхода:
- Сначала — мобильные телефоны;
- Затем — планшеты;
- Потом — ноутбуки и десктопы.
Это отказ от старой логики, где сначала делали «жирный» десктоп, а потом безуспешно пытались его упростить для мобильных.
Почему Mobile First — это правильно:
- Мобильный экран заставляет расставлять приоритеты;
- Меньше лишнего UI;
- Лучше производительность;
- Логичнее media queries (min-width вместо max-width).
Mobile first — это не про размеры, это про мышление.
Viewport-единицы: vh и vw
CSS даёт нам единицы измерения, зависящие от размеров окна браузера — viewport units.
Как они работают:
- 1vh = 1% от высоты окна браузера;
- 1vw = 1% от ширины окна браузера.
Пример:
Блок займёт всю высоту экрана — удобно для hero-секций и полноэкранных экранов.
Важный нюанс: проблема со скроллбаром
На Windows и Linux вертикальный скроллбар входит в ширину viewport.
Из-за этого:
- width: 100vw может быть шире фактического контента;
- Появляется горизонтальный скролл.
На macOS этой проблемы нет — там скролл рисуется поверх контента.
Типичная проблема
Если у блока:
- min-height больше высоты экрана;
- и width: 100vw.
→ появляется горизонтальная прокрутка.
Лучшее решение
✅ Использовать % вместо vw для ширины:
Даже если появится вертикальный скролл, горизонтального уже не будет.
vmin и vmax — адаптация под ориентацию
Кроме vh и vw существуют более гибкие единицы:
vmin
- 1vmin = 1% от меньшей стороны viewport;
- Портрет → 1vmin = 1vw;
- Ландшафт → 1vmin = 1vh.
vmax
- 1vmax = 1% от большей стороны viewport;
- Портрет → 1vmax = 1vh;
- Ландшафт → 1vmax = 1vw.
Эти единицы особенно полезны для:
- Масштабируемых заголовков;
- Квадратных элементов;
- hero-блоков, зависящих от ориентации экрана.
Нечёткие изображения и Retina-экраны
Фоновые изображения мы давно научились оптимизировать. Но что делать с контентными картинками (img), которые выглядят мыльно на экранах с высоким DPR?
Ответ — srcset.
srcset: разные изображения для разного DPR
Атрибут srcset позволяет указать несколько файлов для одного изображения.
Пример:
Как браузер выбирает файл:
- DPR = 1 → sample.jpg
- DPR = 2 → sample-2x.jpg
- DPR = 3 → sample-3x.jpg
📌 Браузер сам выбирает оптимальный вариант — без JS и костылей.
Фоллбэк для старых браузеров
Атрибут src всё равно обязателен.
Он нужен:
- Как fallback для браузеров без поддержки srcset;
- Как базовый источник изображения.
Даже если srcset есть — src должен быть всегда.
Важный момент: размеры делятся
Если картинка имеет размер 2160×300 px и используется как 2x, браузер:
- Делит размеры на 2;
- Отображает её как 1080×150 px.
В DevTools ты увидишь именно «логический», а не физический размер. Это нормально и правильно.
Breakpoints + изображения = единая система
Адаптивный интерфейс — это не только сетка и шрифты. Это ещё и:
- Разные изображения под разные экраны;
- Правильный DPR;
- Грамотный выбор точек перелома.
И всё это должно работать вместе.
Заключение
Breakpoints — это не список чисел, а инструмент мышления.
Они помогают интерфейсу оставаться удобным, читаемым и логичным на любом экране.
Ключевые идеи, которые стоит запомнить:
- breakpoint появляется там, где дизайн перестаёт работать;
- mobile first — это стратегия, а не тренд;
- vh/vw мощные, но требуют осторожности;
- % часто надёжнее, чем vw;
- vmin и vmax дают гибкость при смене ориентации;
- srcset — обязательный стандарт для чётких изображений.
Хорошая адаптивная верстка незаметна для пользователя — но именно в этом и заключается её высшее мастерство.
Полезные ресурсы:
Сообщество дизайнеров в VK:
https://vk.com/grafantonkozlov
Канал на Дзен:
https://dzen.ru/grafantonkozlov
Телеграмм канал сообщества:
https://t.me/grafantonkozlov
Премиум контент: