Čo je to breakpoint v responzívnom dizajne?

Breakpoints (prelomové body) v responzívnom dizajne sú prahové hodnoty šírky obrazovky zariadenia, pri ktorých sa menia CSS štýly prvkov stránky, keď ich dosiahnu alebo prekročia.

Hlavný cieľ breakpointov:

• Zabezpečiť optimálne zobrazenie obsahu: Na rôznych veľkostiach obrazoviek môžu mať bloky rôzne veľkosti, polohy a okraje.
• Skryť/zobraziť prvky: Napríklad na mobilných zariadeniach možno skryť bočný panel a na desktopoch ho zobraziť.
• Zmeniť písma a obrázky: Pre lepšiu čitateľnosť a výkon.

Breakpointy sú definované pomocou media queries v CSS:

/* Predvolené štýly (pre mobilné zariadenia najskôr) */
body {
  font-size: 16px;
}

/* Štýly pre obrazovky od 768px šírky a viac */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Zobraziť bočný panel */
  }
}

/* Štýly pre obrazovky od 1200px šírky a viac */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Typické breakpointy sú založené na štandardných veľkostiach zariadení, ale môžu byť prispôsobené konkrétnemu dizajnu. Príklady štandardných breakpointov:

Veľkosť obrazovky	Typické použitie
Do 576px	Veľmi malé (napríklad staré smartfóny na výšku)
576px - 768px	Malé (smartfóny na šírku, malé tablety)
768px - 992px	Stredné (tablety na výšku, notebooky)
992px - 1200px	Veľké (notebooky, stolové počítače)
Nad 1200px	Veľmi veľké (veľké monitory)

Dôležité je navrhovať s "mobile-first" prístupom, začínajúc od najmenších breakpointov a pridávaním štýlov pre väčšie obrazovky, čo uľahčuje prepísanie štýlov.