Mida tuleb CSS-is märkida, et seadistada ja rakendada neid murdepunktid?

Media päringud kasutavad @media. Nendes määratakse tingimused stiilide rakendamiseks, mis põhinevad seadme või vaateala omadustel.

Peamised media päringute parameetrid:

• width / height: Vaateala laius/kõrgus.
• min-width / min-height: Miinimumlaius/kõrgus.
• max-width / max-height: Maksimaalne laius/kõrgus.
• orientation: Seadme orientatsioon (portrait või landscape).

Näide braekpointide seadistamisest:

/* Vaikimisi stiilid väiksematele ekraanidele kuni 768px */
body {
  font-size: 16px;
}

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

/* Braekpunkt 992px ja suurematele ekraanidele */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Kõige sagedamini kasutatavad strateegiad:

1. Mobile First: Esmalt määratakse stiilid väikestele ekraanidele, seejärel lisatakse min-width media päringud laiematele ekraanidele.
2. Desktop First: Esmalt määratakse stiilid suurtele ekraanidele, seejärel lisatakse max-width media päringud kitsamatele ekraanidele.

Strategia valik sõltub projekti ja eelistustest.

Standardväärtused braekpointidele (ligikaudsed, sõltuvad raamistikust või kokkuleppest):

Seade	Laiusvahemik	Media päring (Mobile First)	Media päring (Desktop First)
Väikesed telefonid	< 576px	Puudub (põhistiilid)	@media (max-width: 575.98px)
Telefonid	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Tahvelarvutid	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Sülearvutid	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Arvutid	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Suured arvutid	>= 1400px	@media (min-width: 1400px)	Puudub (põhistiilid)

Oluline on valida braekpointid sisu ja paigutuse põhjal, mitte seadmete standardite järgi. Need peaksid aktiveeruma seal, kus paigutus hakkab «lagunema».