Responsief ontwerp met mediaqueries

Zonder één metatag delen veel telefoons een pagina in alsof het scherm veel breder is (MDN noemt 980 pixels als voorbeeld) en verkleinen die daarna, zodat een mediaquery voor telefoons nooit wordt uitgevoerd.

Eén pagina, elk scherm

Responsief ontwerp betekent één pagina bouwen die zich aanpast aan elk scherm waarop die terechtkomt, van een smalle telefoon tot een brede monitor, in plaats van een aparte mobiele site te maken. Het berust op drie ideeën: een indeling met flexibele in plaats van vaste breedten, media die binnen hun containers meeschalen en mediaqueries die de indeling aanpassen waar die niet meer werkt. Flexbox en grid doen al veel werk, zoals je in de laatste twee hoofdstukken zag met omlopende kaarten en auto-fill-kolommen.

De viewport-metatag

Veel telefoons geven pagina's weer in een virtueel weergavevenster dat breder is dan het scherm, volgens MDN bijvoorbeeld 980 pixels, en verkleinen daarna het resultaat, omdat oudere sites voor desktops zijn gebouwd. Voor een pagina die zich moet aanpassen, zit dat in de weg: een mediaquery die onder 600 pixels moet inschakelen, wordt nooit uitgevoerd, omdat de browser denkt dat het scherm 980 pixels breed is. <meta name="viewport" content="width=device-width"> in de head vertelt de browser de werkelijke apparaatbreedte te gebruiken, gemeten in CSS-pixels. Voeg nooit user-scalable=no of een lage maximum-scale toe; MDN waarschuwt dat zoom blokkeren slechtzienden uitsluit en WCAG 1.4.4 verwacht dat tekst tot 200 procent vergroot kan worden.

Vloeiende breedten en afbeeldingen

Vaste breedten zijn de meest voorkomende oorzaak van zijwaarts scrollen op telefoons. Geef de voorkeur aan max-width boven width: max-width: 70rem op een paginaomhulsel laat het een klein scherm vullen en stoppen met groeien op een groot scherm. Afbeeldingen behouden standaard hun natuurlijke pixelgrootte, dus een foto van 1200 pixels loopt buiten een scherm van 390 pixels. Met img { max-width: 100%; height: auto; } kunnen afbeeldingen krimpen om in hun container te passen en hun verhoudingen behouden. WCAG 1.4.10, Reflow, vraagt dat inhoud op een breedte van 320 CSS-pixels werkt zonder in twee richtingen te scrollen. Je pagina in een venster van 320 pixels breed controleren is een goede gewoonte.

Mediaqueries

Een mediaquery omhult regels die alleen gelden als een voorwaarde waar is. @media (min-width: 600px) { ... } past de regels toe wanneer het weergavevenster minstens 600 pixels breed is. De gebruikelijke aanpak is mobile first: schrijf de basisstijlen voor een smal scherm, vaak de eenvoudigste (één kolom, alles onder elkaar), en voeg daarna min-width-queries toe die de indeling veranderen zodra de ruimte groeit. Kies breekpunten waar je inhoud er verkeerd begint uit te zien, niet door populaire apparaatformaten te gokken, want elk jaar verschijnen nieuwe schermformaten. Als je breekpunten in em schrijft, zoals 40em, reageren ze ook wanneer een lezer de tekst vergroot.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

Andere dingen die een query kan vragen

Mediaqueries kunnen meer dan breedte testen. De lezersvoorkeuren komen uit Media Queries Level 5: (prefers-color-scheme: dark) geldt wanneer de lezer in het besturingssysteem een donker thema heeft gekozen, zodat je automatisch donkere kleuren kunt aanbieden. (prefers-reduced-motion: reduce) geldt wanneer de lezer om minder beweging heeft gevraagd, vaak omdat animatie duizelig maakt; schakel daarin grote bewegingen en parallaxeffecten uit. (hover: hover), uit Level 4, vertelt of de primaire aanwijzer boven iets kan zweven, wat een aanraakscherm niet kan. print geeft een pagina opmaak voor papier, bijvoorbeeld door het menu te verbergen. Ten slotte maakt clamp() afmetingen vloeiend zonder query: font-size: clamp(1.5rem, 4vw, 2.5rem) groeit met het scherm maar wordt nooit kleiner dan 1.5rem of groter dan 2.5rem.