Що таке breakpoint в адаптивному дизайні?

CSSJunior~1 хв читання

Breakpoint - це контрольна ширина екрана, при досягненні якої макет починає змінювати свою поведінку через media queries. По суті, це «точка перелому», де інтерфейс перебудовується під новий пристрій (мобільний, планшет, ноутбук, десктоп).

Як це виглядає на практиці:

css

@media (max-width: 768px) {
  /* стилі для пристроїв з екраном ≤ 768px */
}

Де 768px - це breakpoint.

Для чого потрібні breakpoints:

перебудувати сітку;
змінити розміри елементів;
спростити навігацію на мобільних;
адаптувати шрифти, відступи і компоненти.

Типові breakpoints (орієнтири):

320-480px: мобільні
768px: планшети
1024-1280px: ноутбуки
1440px+: десктопи

Підсумок: breakpoint - це точка зміни макета, яка використовується разом з media queries для адаптивного інтерфейсу.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.