ℹ️ Ihr Browser unterstützt keine CSS Container Queries.

Container Queries Units

Der unten abgebildete Container ist in der Größe veränderbar (Sie können ihn mit der Maus strecken und verkleinern, indem Sie auf seine untere rechte Ecke klicken).

Die Schriftgröße des Titels h2 ist dank der Einheit cqw (Container Query Width) relativ zur verfügbaren Breite in seinem übergeordneten Container. cqw (container query width).

Dies geschieht in zwei Schritten: Ich erstelle einen Container Queries, der auf der Breite des Elternteils basiert, und passe dann die Schriftgröße an die Breite des Containers an (mindestens 1rem).

responsive font size in CQU (Container Queries Units)

Quelle: