Ką reikia nurodyti CSS, kad būtų galima sukonfigūruoti ir taikyti šiuos pertraukos taškus?

Naudojami @media media užklausos. Joje nustatomos sąlygos stilių taikymui, pagrįstos įrenginio ar peržiūros srities ypatybėmis.

Pagrindiniai media užklausų parametrai:

• width / height: Peržiūros srities plotis/aukštis.
• min-width / min-height: Mažiausias plotis/aukštis.
• max-width / max-height: Didžiausias plotis/aukštis.
• orientation: Įrenginio orientacija (portrait arba landscape).

Pavyzdys, kaip nustatyti breakpoints:

/* Numatyti stiliai mažesniems nei 768px ekranams */
body {
  font-size: 16px;
}

/* Breakpoint nuo 768px iki 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Breakpoint nuo 992px ir didesniems ekranams */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Dažniausiai naudojamos strategijos:

1. Mobile First: Pirmiausia nustatomos stiliai mažesniems ekranams, tada pridedami min-width media užklausos platesniems ekranams.
2. Desktop First: Pirmiausia nustatomos stiliai dideliems ekranams, tada pridedami max-width media užklausos siauresniems ekranams.

Strategijos pasirinkimas priklauso nuo projekto ir pageidavimų.

Standartinės breakpoints reikšmės (apytikslės, priklauso nuo framework'o ar susitarimo):

Įrenginys	Plotis diapazonas	Media užklausa (Mobile First)	Media užklausa (Desktop First)
Maži telefonai	< 576px	Nėra (baziniai stiliai)	@media (max-width: 575.98px)
Telefonai	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Planšetės	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Nešiojami kompiuteriai	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Darbalaukiai	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Dideli darbalaukiai	>= 1400px	@media (min-width: 1400px)	Nėra (baziniai stiliai)

Svarbu pasirinkti breakpoints remiantis turiniu ir maketu, o ne įrenginio standartais. Jie turėtų įsijungti ten, kur maketas pradeda «lūžti».