Mis on breakpoint kohandatud kujunduses?

Breakpoints (breakpoint) adaptiivses disaini puhul on ekraani laiuse lävend, mille saavutamisel või ületamisel muutuvad lehe elementide CSS-stiilid.

Breakpoints peamine eesmärk:

• Sisu optimaalse kuvamise tagamine: erineva suurusega ekraanidel võivad blokid olla erineva suurusega, paigutusega, vahedega.
• Elementide peitmine/näitamine: näiteks mobiilseadmetes võib külgpaneel peidetud olla, arvutites näidata.
• Fontide ja piltide muutmine: parema loetavuse ja jõudluse jaoks.

Breakpoints määratakse CSS-is media queries abil:

/* Vaikimisi stiilid (esimesena mobiilidele) */
body {
  font-size: 16px;
}

/* Stiilid alates 768px ja suurematele ekraanidele */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Näidata külgpaneeli */
  }
}

/* Stiilid alates 1200px ja suurematele ekraanidele */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Tüüpilised breakpoints põhinevad standardsetel seadme suurustel, kuid neid saab kohandada vastavalt disainile. Näited:

Ekraani suurus	Tavaline kasutus
kuni 576px	Väga väike (nt vanad nutitelefonid portree režiimis)
576px - 768px	Väike (nutitelefonid horisontaalis, väikesed tahvelarvutid)
768px - 992px	Keskmine (tahvelarvutid portree, sülearvutid)
992px - 1200px	Suur (sülearvutid, lauaarvutid)
üle 1200px - 1400px+	Väga suur (suured monitorid)

Oluline on arendada disaini "mobile-first" põhimõttel, alustades väiksematest breakpoints ja lisades stiile suurematele ekraanidele, mis lihtsustab stiilide ülekirjutamist.