Responsief ontwerp

Webfuncties: Containerquery's (grootte) Kleine, grote en dynamische viewporteenheden aspect-ratio min(), max() en clamp() Viewporteenheden

Algemene best practices

  • Gebruik @container-query's om componentgestuurde responsieve lay-outs te maken die zich aanpassen aan de grootte van de bovenliggende container in plaats van de viewport. Ga naar Groottebewuste opmaak voor meer informatie.
  • Gebruik dynamische viewport-eenheden (dvh, dvw) in plaats van vh/vw om te voorkomen dat de indeling wordt verbroken als UI-elementen van de mobiele browser (zoals adresbalken) verschijnen of verdwijnen.
  • Gebruik aspect-ratio voor media-elementen (zoals <img> en <video>) om ruimte te reserveren tijdens het laden en Cumulative Layout Shift (CLS) te voorkomen.

Ga naar CSS-indelingen en responsief ontwerp voor de indelingsmechanismen achter responsieve UI (flexbox, raster, containerquery-eenheden, viewport-eenheden).

Responsieve typografie

  • Combineer viewport-relatieve en lettertype-relatieve eenheden in clamp() voor lettergrootten die worden geschaald met de viewport-grootte, terwijl ze binnen een gewenst bereik blijven. Bijvoorbeeld clamp(2rem, 1rem + 5vw, 4rem). Pas de verhouding van viewport-relatieve en lettertype-relatieve eenheden aan om te bepalen hoe snel de lettergrootte verandert.
  • Gebruik NIET alleen vw voor de lettergrootte zonder clamp(), omdat de tekst dan te klein of te groot kan worden geschaald op extreme schermen.

Ga naar Vloeiend schalen om het type en de afstand te schalen met de container in plaats van het kijkvenster.