1. Що таке breakpoints
Breakpoint (точка злому) — це значення ширини вікна, при якому змінюється розкладка сайту. Breakpoints використовуються в медіазапитах для визначення, коли застосовувати ті чи інші стилі.
Наприклад, якщо до 480px — один макет, а після 480px — інший, то 480px є breakpoint.
2. Як обирати breakpoints
Щоб визначити breakpoints, потрібно розташувати найпопулярніші пристрої на умовній прямій від 0 до 2000+ пікселів. Пристрої природно групуються:
- Телефони: 320–480px
- Планшети (портрет): 600–768px
- Планшети (ландшафт): 768–1024px
- Десктопи: 1280–1600px
- Великі десктопи: 1920px+
Два підходи до визначення
| Підхід | Опис | Приклад |
|---|---|---|
| Через реальні пристрої | Межі проходять через ширини конкретних пристроїв | 320px, 768px, 1224px, 1600px |
| Між групами | Межі проходять між групами пристроїв | 600px, 900px, 1200px, 1800px |
Обидва підходи мають право на існування. У реальних проєктах breakpoints зазвичай вже визначені в технічному завданні або дизайн-макетах.
3. Правила роботи з breakpoints
- Обираємо один раз для всього проєкту — всі блоки перебудовуються на тих самих breakpoints
- Уникаємо різних breakpoints для різних блоків — це створює хаос у коді
- Виняток: іноді один конкретний блок (наприклад, меню) не вкладається в жоден breakpoint — тоді допустимо додати окремий медіазапит тільки для нього
Приклад з меню
На ширині 1350px показується повне десктопне меню. На 1349px — скорочена версія (менший логотип). А на планшетній ширині — мобільне меню (бургер). Для переходу між повним і скороченим меню додається окремий breakpoint тільки для цього блоку.
4. Підсумкова таблиця
| Тема | Ключове |
|---|---|
| Breakpoints | Обираються один раз для всього проєкту; виняток — окремі блоки |
