Wat moet er in CSS worden gespecificeerd om deze breakpoints te configureren en toe te passen?

De mediaquery @media wordt gebruikt. Hierin worden voorwaarden vastgesteld om stijlen toe te passen op basis van de kenmerken van het apparaat of het weergavegebied.

Belangrijkste parameters van mediaqueries:

• width / height: Breedte / hoogte van het weergavegebied.
• min-width / min-height: Minimale breedte / hoogte van het weergavegebied.
• max-width / max-height: Maximale breedte / hoogte van het weergavegebied.
• orientation: Oriëntatie van het apparaat (portrait of landscape).

Voorbeeld van gebruik voor het instellen van breekpunten:

/* Standaard stijlen voor schermen kleiner dan 768px */
body {
  font-size: 16px;
}

/* Breekpunt voor schermen van 768px tot 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Breekpunt voor schermen vanaf 992px */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Veelgebruikte strategieën voor het instellen van breekpunten:

1. Mobile First: Eerst worden stijlen voor de kleinste schermen gedefinieerd, daarna worden min-width mediaqueries toegevoegd voor bredere schermen.
2. Desktop First: Eerst worden stijlen voor grote schermen gedefinieerd, daarna worden max-width mediaqueries toegevoegd voor smallere schermen.

De keuze van strategie hangt af van het project en de voorkeuren.

Standaardwaarden voor breekpunten (bij benadering, afhankelijk van het framework of de afspraak):

Apparaat	Breedtebereik	Mediaquery (Mobile First)	Mediaquery (Desktop First)
Kleine telefoons	< 576px	Niet aanwezig (basisstijlen)	@media (max-width: 575.98px)
Telefoons	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Tablets	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Laptops	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Desktops	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Büyük masaüstleri	>= 1400px	@media (min-width: 1400px)	Niet aanwezig (basisstijlen)

Het is belangrijk om breekpunten te kiezen op basis van inhoud en lay-out, niet alleen op basis van apparaatstandaarden. Ze moeten activeren waar het ontwerp begint te 'breken'.