Breakpoints

1. Що таке breakpoints

Breakpoint (точка злому) — це значення ширини вікна, при якому змінюється розкладка сайту. Breakpoints використовуються в медіазапитах для визначення, коли застосовувати ті чи інші стилі.

Наприклад, якщо до 480px — один макет, а після 480px — інший, то 480px є breakpoint.

2. Як обирати breakpoints

Щоб визначити breakpoints, потрібно розташувати найпопулярніші пристрої на умовній прямій від 0 до 2000+ пікселів. Пристрої природно групуються:

• Телефони: 320–480px
• Планшети (портрет): 600–768px
• Планшети (ландшафт): 768–1024px
• Десктопи: 1280–1600px
• Великі десктопи: 1920px+

Два підходи до визначення

Обидва підходи мають право на існування. У реальних проєктах breakpoints зазвичай вже визначені в технічному завданні або дизайн-макетах.

3. Правила роботи з breakpoints

• Обираємо один раз для всього проєкту — всі блоки перебудовуються на тих самих breakpoints
• Уникаємо різних breakpoints для різних блоків — це створює хаос у коді
• Виняток: іноді один конкретний блок (наприклад, меню) не вкладається в жоден breakpoint — тоді допустимо додати окремий медіазапит тільки для нього

Приклад з меню

На ширині 1350px показується повне десктопне меню. На 1349px — скорочена версія (менший логотип). А на планшетній ширині — мобільне меню (бургер). Для переходу між повним і скороченим меню додається окремий breakpoint тільки для цього блоку.

4. Підсумкова таблиця