Responsives Webdesign

Webfunktionen: Containerabfragen (Größe) Kleine, große und dynamische Darstellungsbereichseinheiten aspect-ratio min(), max() und clamp() Darstellungsbereichseinheiten

Allgemeine Best Practices

  • Mit @container-Abfragen können Sie komponentenbasierte responsive Layouts erstellen, die sich an die Größe des übergeordneten Containers und nicht an den Darstellungsbereich anpassen. Weitere Informationen finden Sie unter Größenabhängige Stile.
  • Verwenden Sie dynamische Darstellungsbereichseinheiten (dvh, dvw) anstelle von vh/vw, um Layoutfehler zu vermeiden, wenn UI-Elemente des mobilen Browsers (z. B. Adressleisten) ein- oder ausgeblendet werden.
  • Verwenden Sie aspect-ratio für Medienelemente (wie <img> und <video>), um während des Ladens Platz zu reservieren und Cumulative Layout Shift (CLS) zu verhindern.

Informationen zu den Layoutmechanismen hinter responsiven Benutzeroberflächen (Flexbox, Grid, Containerabfrageeinheiten, Darstellungsbereicheinheiten) finden Sie unter CSS-Layouts und responsives Design.

Responsive Typografie

  • DO combine viewport-relative and font-relative units in clamp() for font sizes that scale with the viewport size while ensuring they stay within a desired range. Beispiel: clamp(2rem, 1rem + 5vw, 4rem) Passen Sie das Verhältnis von Darstellungsbereich- und Schriftart-relativen Einheiten an, um zu steuern, wie schnell sich die Schriftgröße ändert.
  • Verwenden Sie vw NICHT allein für die Schriftgröße ohne clamp(), da der Text auf extremen Bildschirmen sonst zu klein oder zu groß dargestellt werden kann.

Informationen zum Skalieren von Schrift und Abständen mit dem Container anstelle des Darstellungsbereichs finden Sie unter Fluide Skalierung.