CSS breakpoints для адаптивной верстки

Breakpoint — условие, при котором CSS меняет представление макета. В адаптивной верстке это часто порог ширины viewport: например, переход от одной колонки к двум.

Как media queries связаны с viewport?

Условие min-width сравнивает ширину viewport с указанным порогом. В iframe учитывается ширина его области просмотра, а не всей страницы FlexViewport. Масштаб превью не меняет эту ширину.

Есть ли универсальные breakpoints?

Нет одного набора, который подходит любому дизайну. Выбирайте контрольную точку там, где содержимое требует перестроения: заголовок ломает сетку, навигация не помещается или колонки становятся слишком узкими. Размеры популярных устройств — полезные контрольные образцы, а не обязательные CSS-пороги.

Как работает mobile-first?

Начните с базового одноколоночного макета для узкой области. Добавляйте колонки и отступы по мере появления места через min-width. Ниже 768px — лишь пример для этой сетки, не стандарт для всех планшетов.

Пример mobile-first CSS

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

Как проверить выбранную границу?

Для примера ниже сравните custom viewport шириной 767, 768 и 769 CSS px. Проверьте переносы длинного текста, кнопки и горизонтальное переполнение. Затем просмотрите более узкие и широкие пресеты: успешный тест одной границы не проверяет весь диапазон.

Чем пресет отличается от breakpoint?

Пресет — конкретная пара ширины и высоты для просмотра страницы. Breakpoint — условие в CSS сайта. Один пресет может активировать несколько media queries, а между соседними пресетами может находиться ещё непроверенная контрольная точка.

Подробнее о CSS: MDN — Viewport concepts · MDN — Media queries