Šta je potrebno navesti u CSS-u za konfiguraciju i primenu ovih breakpoint-ova?

Koristi se @media upit za medije. Unutar njega se postavljaju uslovi za primenu stilova, zasnovani na karakteristikama uređaja ili oblasti prikaza.

Glavni parametri medijskih upita:

• width / height: Širina / visina oblasti prikaza.
• min-width / min-height: Minimalna širina / visina oblasti prikaza.
• max-width / max-height: Maksimalna širina / visina oblasti prikaza.
• orientation: Orijentacija uređaja (portrait ili landscape).

Primer upotrebe za podešavanje tačaka prekida:

/* Podrazumevani stilovi za ekrane manje od 768px */
body {
  font-size: 16px;
}

/* Tačka prekida za ekrane od 768px do 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Tačka prekida za ekrane od 992px i više */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Često korišćene strategije:

1. Mobile First: Prvo se definišu stilovi za najmanje ekrane, zatim se dodaju min-width medijski upiti za šire ekrane.
2. Desktop First: Prvo se definišu stilovi za velike ekrane, zatim se dodaju max-width upiti za manje ekrane.

Izbor strategije zavisi od projekta i preferencija.

Približne vrednosti tačaka prekida:

Uređaj	Opseg širine	Medijski upit (Mobile First)	Medijski upit (Desktop First)
Mali telefoni	< 576px	Nema (osnovni stilovi)	@media (max-width: 575.98px)
Telefoni	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Tableti	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Laptopovi	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Desktop računari	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Veliki desktop računari	>= 1400px	@media (min-width: 1400px)	Nema (osnovni stilovi)

Važno je odabrati tačke prekida na osnovu sadržaja i rasporeda, a ne samo prema standardima uređaja. Trebaju aktivirati tamo gde layout počinje da 'puca'.