Flüssige Schriftgröße

Sabine1 · #1 (**permalink**) 28.03.2023, 08:46

Oftmals wird empfohlen, dass man die Schriftgröße (oder auch die Breite von Containern) in der Einheit rem angibt, damit die im Browser eingestellte Standard Schriftgröße berücksichtigt wird.
Seit einigen Wochen unterstützen die großen Browser Container Query Units.
Ich möchte die Schriftgröße flexibel nach der Breite des Containers gestalten und zusätzlich in der Einheit rem.

Die Schriftgröße sollte bei einer Container-Breite von 280 Pixel (fast 18rem) 1rem betragen.
Bei einer Container-Breite von 980 Pixel (61,25rem wenn die Standard-Schriftgröße 16 Pixel beträgt) so die Schriftgröße 1,25rem betragen.
Also eine lineare Funktion.

Und so habe ich das umgesetzt:

Code:

:root {
	--fs: calc((1cqi / 28) + 0.9);
}
p {
	font-size: var(--fs)rem;
}

Das Ganze funktioniert aber nicht.
Kann das gar nicht funktionieren oder habe ich da etwas falsch gemacht?

top · #2 (**permalink**) 28.03.2023, 11:38

Hatte mich bisher noch nicht mit der recht neuen Einheit "cqi" auseinandergesetzt.

Bei dem was ich eben zu Container Query gelesen habe, frage ich mich ob sich dies überhaupt bei :root nutzen kann.

Sabine1 · #3 (**permalink**) 28.03.2023, 14:40

Habe es jetzt mal folgendermaßen probiert

Code:

h2, h3, h4, h5, h6 {
	font-size: 1.25rem;
}

p {
	font-size: 1rem;
}

.content {
	container: content / inline-size;
	--fsv: calc(100cqi / 2800px);
	--fs: calc(var(--fsv) + 0.9);
}

div.flexibel p {
	font-size: calc(var(--fs) * 1rem);
}

Funktioniert aber auch nicht
siehe hier:
Schriftgröße

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
1em: Schriftgröße auf Mobilgeräten ist viel zu klein	AndreasB	CSS	3	16.11.2018 12:27
Frage zur Einheit der Schriftgröße	web334	CSS	4	21.01.2012 11:45
Schriftgröße in Navigationsleiste unterschiedlich	Hilltono	CSS	2	07.06.2010 12:07
Schriftgröße in verschiedenen Browsern	kadees	CSS	6	16.11.2006 12:25
WCAG 1.0 Level A Konformität und Schriftgröße?	andreas333	Barrierefreiheit	1	15.11.2006 16:04