dynamische Schriftgröße in flüssigen Layouts

beim Entwerfen von Flüssigkeitslayouts und die Anpassung von Schriftgrößen zu Bildschirmauflösungen können herausfordernd sein. Einheiten wie "em" können sich nicht angemessen anpassen, und Prozentsätze und Punkte können unzuverlässig sein.

ViewPort-Relative Einheiten

moderne CSS bietet eine Lösung mit Ansichtsport-relativen Einheiten an :

• vw: Prozentsatz des Ansichtsports Breite
• vh: Prozentsatz von Ansichtsport Height
• vminb : kleinerer Wert von VW oder vh
• vmax: größerer Wert von VW oder vh

zum Beispiel:

body {
  font-size: 3.2vw;
}

Hier Ansichtsport-relative Einheiten, mehrere alternative Methoden wurden angewendet:

Medienfragen:

Prozentsätze und Rems:
• setzen Schriftgrößen als Prozentsätze oder "Rem" -Einheiten, die relativ zur Basis -Schriftgröße des Körpers sind.
• root ems (rem): 1rem = die Schriftgröße des Körperelements, die skalierbare Schriftgrößen ermöglichen (2Rem = doppelte Körper Schriftgröße). .

100% = die aktuelle Schriftgröße, um die Skalierbarkeit für mobile Geräte und die Zugänglichkeit sicherzustellen. Schriftarten, die sich an die Bildschirmauflösung des Benutzers anpassen und eine optimale Benutzererfahrung auf verschiedenen Geräten bieten.