Kas ir breakpoint adaptīvā dizainā?

Breakpoints (breakpoint) adaptīvās veidnes veidošanā ir ekrāna platuma slieksnis, kura sasniegšanas vai pārkāpšanas gadījumā mainās lapas elementu CSS stili.

Galvenais breakpoints mērķis:

• Optima satura attēlošana: dažādu izmēru ekrānos blokiem var būt dažādi izmēri, izvietojums, atstarpes.
• Elementu slēpšana/attēlošana: piemēram, mobilajos ierīcēs var slēpt sānu paneli, bet darbvirsmās – rādīt.
• Fontu un attēlu maiņa: labākai lasāmībai un veiktspējai.

Breakpoints tiek noteikti ar media queries CSS:

/* Noklusējuma stili (pirmkārt mobilajiem) */
body {
  font-size: 16px;
}

/* Stili no 768px un lielākiem ekrāniem */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Rādīt sānu paneli */
  }
}

/* Stili no 1200px un lielākiem ekrāniem */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Tipiski breakpoints balstās uz standarta ierīču izmēriem, bet var tikt pielāgoti konkrētam dizainam. Piemēri:

Ekrāna izmērs	Tipiska izmantošana
līdz 576px	Ļoti mazs (piemēram, veci viedtālruņi portreta režīmā)
576px - 768px	Mazs (viedtālruņi horizontāli, mazās planšetēs)
768px - 992px	Vidējs (planšetēs portreta režīmā, klēpjdatoros)
992px - 1200px	Liels (klēpjdatori, darbvirsmas)
Virs 1200px - 1400px+	Ļoti liels (lielas monitori)

Svarīgi ir izstrādāt "mobile-first" dizainu, sākot ar mazākajiem breakpoints un pievienojot stilus lielākiem ekrāniem, tas atvieglo stilu pārklāšanu.