Kas yra breakpoint responsyviame makete?

Breakpoints (breakpoint) adaptuojamoje maketavimo sistemoje yra ekrano pločio riba, kurios pasiekus ar peržengus keičiasi puslapio elementų CSS stiliai.

Pagrindinis breakpoints tikslas:

• Užtikrinti optimalų turinio rodymą: skirtingų dydžių ekranuose blokai gali turėti skirtingą dydį, išdėstymą, tarpelius.
• Elementų slėpimas/rodymas: pavyzdžiui, mobiliuosiuose įrenginiuose galima paslėpti šoninius skydus, o darbalaukiais – parodyti.
• Šriftų ir vaizdų keitimas: geresniam skaitomumui ir našumui.

Breakpoints nustatomi naudojant media queries CSS:

/* Numatyti stiliai (pirmiausia mobiliesiems) */
body {
  font-size: 16px;
}

/* Stiliai nuo 768px ir didesniems ekranams */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Rodyti šoninį skydą */
  }
}

/* Stiliai nuo 1200px ir didesniems ekranams */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Tipiniai breakpoints remiasi standartiniais įrenginių dydžiais, tačiau gali būti pritaikyti pagal konkretų dizainą. Pavyzdžiai:

Ekrano dydis	Tipinė naudojimo sritis
Iki 576px	Labai mažas (pvz., seni išmanieji telefonai portreto režimu)
576px - 768px	Mažas (išmanieji telefonai horizontaliai, mažos planšetės)
768px - 992px	Vidutinis (planšetės portreto režimu, nešiojami kompiuteriai)
992px - 1200px	Didelis (nešiojami kompiuteriai, darbalaukiai)
Daugiau nei 1200px - 1400px+	Labai didelis (didelės monitoriai)

Svarbu kurti "mobile-first" dizainą, pradedant nuo mažiausių breakpoints ir pridedant stilius didesniems ekranams, tai palengvina stilių perrašymą.