Брейкпоинты — это значения ширины области просмотра, на которых адаптивная вёрстка меняет структуру. Распространённый и безопасный набор: около 640 px для больших телефонов, 768 px для планшетов, 1024 px для небольших ноутбуков и 1280 px для десктопа, записанные как запросы min-width в rem. Но лучше считать этот набор отправной точкой и сдвигать брейкпоинты туда, где начинает разваливаться ваш собственный контент, а не гнаться за размерами устройств.
Распространённые брейкпоинты в одной таблице
| Диапазон | Типичный брейкпоинт | Что сюда попадает |
|---|---|---|
| Маленькие телефоны | базовые стили (без запроса) | Телефоны шириной 320–375 px |
| Большие телефоны | 480–640 px | Телефоны 390–440 px в портретной ориентации, телефоны в горизонтальной |
| Планшеты | 768 px | iPad mini и планшеты в портретной ориентации |
| Небольшие ноутбуки, планшеты горизонтально | 1024 px | iPad горизонтально, 13-дюймовые ноутбуки с масштабированием |
| Десктоп | 1280 px | Большинство экранов ноутбуков и настольных компьютеров |
| Широкий десктоп | 1440–1536 px | Большие мониторы |
Записывайте их в rem (40rem, 48rem, 64rem, 80rem), чтобы они сдвигались, когда пользователь увеличивает базовый размер шрифта.
Какие брейкпоинты задают популярные фреймворки
| Фреймворк | Брейкпоинты (min-width) |
|---|---|
| Tailwind CSS v4 | 640, 768, 1024, 1280, 1536 px |
| Bootstrap 5 | 576, 768, 992, 1200, 1400 px |
| Классы размеров окна Material Design 3 | compact < 600, medium 600–839, expanded 840–1199, large 1200–1599, extra-large ≥ 1600 (dp) |
В целом они сходятся в форме: переход к планшету около 600–768, к десктопу около 1000–1200 и один-два широких размера. Подробности: брейкпоинты Tailwind и брейкпоинты Bootstrap.
Почему брейкпоинты под устройства быстро устаревают
Хочется поставить брейкпоинты ровно на ширинах устройств: 375 для одного iPhone, 390 для более нового, 414 для модели Plus. Проблема в том, что устройства меняются каждый год. Одни только актуальные iPhone имеют ширину от 375 до 440 CSS-пикселей (см. таблицу разрешений экранов iPhone), Android-телефоны добавляют множество других значений, а складные телефоны и окна в режиме разделённого экрана могут оказаться где угодно.
Макет, который работает только на конкретных ширинах устройств, сломается на промежуточных. Брейкпоинты должны отмечать места, где нужно менять раскладку, а между ними вёрстка должна быть резиновой.
Как выбрать брейкпоинты по контенту
- Сначала соберите самый узкий макет, примерно на 320 px.
- Медленно расширяйте область просмотра в режиме Responsive в Chrome DevTools.
- Остановитесь, когда дизайн начинает выглядеть плохо: строки становятся слишком длинными, карточки растягиваются, появляется место для второй колонки или навигация может уместиться в одну строку.
- Поставьте брейкпоинт на этой ширине, округлив до разумного значения в rem.
- Повторяйте до самой широкой поддерживаемой раскладки.
Обычно получается три-пять брейкпоинтов. Если их больше шести, часть из них, вероятно, чинит проблемы отдельных компонентов, с которыми лучше справился бы контейнерный запрос или резиновая техника.
Меньше брейкпоинтов с резиновыми техниками
Современный CSS избавляет от многих брейкпоинтов:
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))сам добавляет и убирает колонки.flex-wrap: wrapвместе сflex-basisпереносит элементы, когда им не хватает места.clamp()плавно масштабирует размер шрифта и отступы:font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem).width: min(100% - 2rem, 70rem)одной строкой создаёт контейнер с боковыми отступами и максимальной шириной.
Брейкпоинты оставьте для структурных изменений: вида навигации, числа колонок страницы, положения сайдбара.
Брейкпоинты и планшеты
На планшетах выбор брейкпоинтов заметнее всего. Ширина iPad в портретной ориентации от 744 до 1032 px в зависимости от модели, так что он может оказаться по любую сторону от 768 или 1024. Поворот экрана переносит его через ещё один брейкпоинт. Проверяйте планшеты в обеих ориентациях и помните, что Safari на iPad обычно запрашивает десктопную версию сайта. Подробнее в статье как посмотреть сайт как на iPad в Chrome.
Как проверить брейкпоинты
- Включите Show media queries на панели устройств DevTools, чтобы увидеть каждый брейкпоинт в виде полосы; клик по полосе переключает на эту ширину.
- Проверяйте каждый брейкпоинт на его точной ширине и на 1 px меньше.
- Проверяйте конкретные модели телефонов и планшетов, а не только ширины. Быстрее всего пройтись по страницам на нескольких размерах устройств через Mobile View Extension с готовыми пресетами.
Полная методика описана в статье как проверить адаптивность сайта.
Частые вопросы
Какие стандартные брейкпоинты для адаптивной вёрстки?
Официального стандарта нет. Распространённые значения: 640, 768, 1024 и 1280 px (Tailwind) или 576, 768, 992, 1200 и 1400 px (Bootstrap). Выберите один набор и используйте его последовательно.
Какой брейкпоинт использовать для мобильных?
В CSS по принципу mobile first телефонам брейкпоинт не нужен: они получают базовые стили. Первый брейкпоинт, обычно между 480 и 640 px, отмечает место, где раскладка может начать использовать больше пространства.
Сколько брейкпоинтов должно быть на сайте?
Обычно три-пять. Между ними используйте резиновую вёрстку и добавляйте брейкпоинт только там, где контенту нужна смена структуры.