Ko jānorāda CSS, lai konfigurētu un piemērotu šos…

Media vaicājumi tiek izmantoti ar @media. Tajos tiek noteikti nosacījumi stilu piemērošanai, balstoties uz ierīces vai skata laukuma īpašībām.

Galvenie media vaicājumu parametri:

width / height: Skata laukuma platums/augstums.
min-width / min-height: Minimālais platums/augstums.
max-width / max-height: Maksimālais platums/augstums.
orientation: Ierīces orientācija (portrait vai landscape).

Piemērs, kā konfigurēt breakpoints:

/* Pamatstili mazākiem ekrāniem līdz 768px */
body {
  font-size: 16px;
}

/* Breakpoint no 768px līdz 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Breakpoint no 992px un augstāk */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Bieži izmantotas stratēģijas:

Mobile First: Sākotnēji tiek noteikti stili mazākiem ekrāniem, pēc tam pievieno min-width media vaicājumus plašākiem ekrāniem.
Desktop First: Sākotnēji tiek noteikti stili lieliem ekrāniem, pēc tam pievieno max-width media vaicājumus šaurākiem ekrāniem.

Strategijas izvēle ir atkarīga no projekta un vēlmēm.

Standarta breakpoints vērtības (aptuveni, atkarīgas no framework vai vienošanās):

Ierīce	Platuma diapazons	Media vaicājums (Mobile First)	Media vaicājums (Desktop First)
Mazas tālruņi	< 576px	Nav (pamatstili)	`@media (max-width: 575.98px)`
Tālruņi	>= 576px	`@media (min-width: 576px)`	`@media (max-width: 767.98px)`
Planšetdatori	>= 768px	`@media (min-width: 768px)`	`@media (max-width: 991.98px)`
Portatīvie datori	>= 992px	`@media (min-width: 992px)`	`@media (max-width: 1199.98px)`
Datori	>= 1200px	`@media (min-width: 1200px)`	`@media (max-width: 1399.98px)`
Lielie datori	>= 1400px	`@media (min-width: 1400px)`	Nav (pamatstili)

Svarīgi ir izvēlēties breakpoints, balstoties uz saturu un izkārtojumu, nevis uz ierīču standartiem. Tie jāaktivizē tur, kur izkārtojums sāk «lūzt».

Ko jānorāda CSS, lai konfigurētu un piemērotu šos pārtraukuma punktus?