Брейкпоинты в CSS
Media Queries показали, как срабатывает @media. Responsive Images — как картинки заполняют слоты, которые создают эти запросы. Брейкпоинты — это план: короткий список ширин, где меняется стратегия layout — колонки, nav, отступы — один раз именуете и переиспользуете, чтобы весь сайт шагал синхронно.
Набор инструментов для брейкпоинтов
📊 Брейкпоинты кратко
| Элемент | Задача |
|---|---|
| Брейкпоинт | Запланированная ширина, где меняются правила layout |
| Выбор от контента | Ширины, где дизайн тесно или пусто — не SKU телефонов |
Именованные шаги (sm, md, lg…) |
Один токен везде; проще аудит и работа в команде |
| Mobile-first лестница | База = узкий экран; шаги min-width добавляют улучшения |
| Fluid между шагами | %, rem, Flex/Grid до нового query |
| Задокументированный набор | Короткий список в комментариях или токенах — не двадцать разовых значений |
Брейкпоинт — не «iPhone». Это «когда сайдбар больше не помещается рядом со статьёй» или «когда nav может стать строкой». Смотрите на контент, затем зафиксируйте один общий шаг.
Сначала контент — не каталог устройств
Меняйте ширину окна, пока что-то не ломается: строка слишком длинная, карточки сжаты, гамбургер при свободном месте. Запишите эту ширину в rem (или em). Такой кандидат лучше, чем копировать маркетинговую таблицу пикселей телефонов.
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}
Списки «под каждый телефон» быстро устаревают — каждый год новые модели. Несколько шагов от контента живут дольше и держат stylesheet читаемым.
Именуйте шаги — переиспользуйте те же ширины
Для типичного сайта хватит двух–четырёх шагов. Дайте короткие имена в комментариях (или CSS custom properties со значениями ширины). Каждый компонент, который «включает широкий layout», должен использовать то же число — не 720px в header и 768px в grid.
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}
/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
В классическом CSS @media не везде может читать custom property как условие так, как хотелось бы — поэтому токены в :root — это документация и помощь для JS/tooling; литералы в запросах держите согласованными. Важна привычка: одна общая лестница, а не случайные ширины в каждом файле.
Mobile-first лестница
Пишите узкие значения по умолчанию без queries. Каждый шаг min-width добавляет колонки, крупнее тип или горизонтальный nav. Не переписывайте всю страницу на каждом шаге — меняйте один понятный слой.
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Desktop-first сжатие (когда стартуете с широкого)
Если проект уже отдаёт широкий layout, queries с max-width могут схлопывать колонки на меньших viewport. Будьте последовательны: не смешивайте без причины min-width и max-width для одного компонента.
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}
@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}
Предпочитайте одно направление на проект. Media Queries уже разобрали синтаксис min-width vs max-width — здесь правило стратегии: общие шаги, одна философия везде.
Один шаг — много компонентов
Когда срабатывает --bp-lg (или 64rem), обновляйте nav, grid и отступы вместе, если они относятся к одной главе layout. Разрозненные «почти одинаковые» ширины дают баги: header переключается раньше main grid.
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}
Сначала fluid — потом queries
Между брейкпоинтами Flex, Grid, % и rem уже должны сглаживать небольшие изменения ширины. Новый query — только когда нужна структурная смена (число колонок, другой паттерн nav). Больше queries — не значит профессиональнее.
Попробуйте сами
- Измените ширину учебной страницы и запишите две ширины, где layout реально должен меняться.
- Переведите их в
remи назовите (md,lg). - Примените те же два значения
min-widthи к card grid, и к nav. - Найдите в CSS другие числа
min-width/max-width— объедините близкие дубликаты. - Уберите лишний query, улучшив fluid-базу (gap,
minmax, перенос).
Частые ошибки
- Каталог ширин каждого телефона вместо «болевых» точек контента
- Двенадцать перекрывающихся queries с чуть разными пикселями
- Header ломается на
768px, main на800px, footer на720px - Пропуск fluid CSS и решение каждого сдвига новым
@media - Повторное обучение скобкам
@mediaилиsrcsetздесь вместо планирования лестницы
Итог
- Брейкпоинты — запланированные шаги layout; назовите короткий набор и переиспользуйте
- Ширины — от напряжения контента, не от маркетинговых таблиц устройств
- Предпочитайте mobile-first лестницу
min-width; одно направление на проект - Между шагами оставайтесь fluid; query только для структурных изменений
- Это закрывает модуль Responsive — дальше: Box Shadow в Effects & Motion
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху