Wert der Basis-Schriftgröße

[Gunther]

@@Gunnar:

nuqneH

line-height: calc(1.1em + #{$container-width * $container-width}vw);

Bevor’s jemand merkt: calc(1.1em + #{$container-width / 1% * $element-width / 100%}vw);

Die 23.6vw sind aber ein exorbitant großer Wert ...! :-P
Also eher so etwas wie:

calc(1.1em + #{$container-width / 1% * $element-width / 100% / 100}vw);  

Aber die Viewport-Einheiten haben ein "generelles" Problem, wenn es um Schriftgröße, bzw. damit verbundene Größen wie line-height geht - sie skalieren beim Zoomen im Browser nicht!

Zusätzlich hast du ja selbst schon geschrieben, dass das im Prinzip nur bei fluiden Layouts funktioniert, wenn man zusätzlich noch die Elementbreite in Prozent kennt.

Das ist bspw. bei Verwendung von Flexbox aber nicht zwingend der Fall (ist ja gerade einer der Vorteile von Flexbox, diese nicht kennen zu müssen).

Also alles in allem erscheint mir das höchstens eine "Variante" für einen bestimmten Layout-Typ zu sein, die noch dazu aktuell nur sehr "eingeschränkt" anwendbar ist, aufgrund mangelnder Browserunterstützung.

Das grundlegende Problem ist aber, dass man in CSS bei der line-height keine Verbindung/ keinen Bezug zur Elementbreite herstellen kann.

Gruß Gunther