Es ist schon 2023, die Zeit vergeht wie im Flug! Es ist also ziemlich nervig, CSS-Medienabfragen für verschiedene Bildschirmauflösungen zu verwenden, nur um die Textgröße um ein paar Pixel oder mehr zu vergrößern/verkleinern. Warum verwenden Sie nicht stattdessen eine dynamische Schriftgröße?

Was ist eine dynamische Schriftgröße?

Dynamische Schriftgröße bedeutet, dass Ihre Textgrößen proportional zur Breite des Ansichtsfensters des Benutzers geändert werden. Sie müssen lediglich den Mindestwert für die Schriftgröße, den Maximalwert und zwei Haltepunkte angeben, zwischen denen die Schriftart skaliert wird.

Beispiel: Nehmen wir an, Sie möchten, dass Ihr Text eine Schriftgröße von 20pxbei einer Ansichtsfensterbreite von 768pxund eine maximale Größe von 36pxbei einer Ansichtsfensterbreite von hat 1920px. Wenn die Breite des Ansichtsfensters jedoch kleiner ist als 768px, soll die Schriftgröße nicht kleiner werden als 16px, und wenn die Breite des Ansichtsfensters größer ist, 1920px soll die Skalierung der Schriftgröße bei aufhören 48px.

Viele Worte, schauen Sie sich besser die Bilder unten an.

Wenn die Breite des Ansichtsfensters gleich ist, 768pxist die Schriftgröße gleich 20px:

Wenn die Breite des Ansichtsfensters größer als 768pxdie Schriftgröße ist, wird die Schriftgröße proportional skaliert:

Daraus 1920pxwird 36px:

Bei Bildschirmen, die kleiner als sind 768px, darf die Schriftgröße nicht kleiner sein als 16px:

Bei Bildschirmen, die größer als sind 1920px, darf die Schriftgröße nicht größer sein als 48px:

Ziemlich cool, oder ?

Was ist der Trick?

Um dies zu erreichen, benötigen wir nur eine CSS-Zeile:

font-size: clamp(16px, calc(20px + (36–20) * (100vw - 768px)/(1920–768)), 48px);

Der gewünschte Wert ist der schwierigste Teil – wir verwenden dafür die CSS-Funktion calc() , die Berechnungen zwischen verschiedenen CSS-Werten durchführt.

20px (as well as 20)— ist unser Mindestwert für die Schriftgröße;

36— ist der maximale Wert der Schriftgröße;

768px (768)– ist der untere Haltepunkt;

1920— der höhere Haltepunkt;

100vwgibt die volle Breite des Ansichtsfensters des Benutzers ( 1vw = 1%der Breite des Ansichtsfensters) zurück.

Um sicherzustellen, dass diese Formel funktioniert, testen wir sie auf unsere Haltepunktwerte ( 768pxund 1920px).

Wenn also die Breite des Ansichtsfensters des Benutzers wird 768px, 100vw = 768px. ersetzen Sie es einfach 100vwdurch 768pxund Sie erhalten genau 20px(der rechte Teil der Formel ist gleich 0px).

Machen Sie dasselbe mit der 1920pxBreite des Ansichtsfensters und Sie erhalten genau 36pxden Wert für die Schriftgröße (der rechte Teil der Formel ist gleich 16px).

Sie können remanstelle von auch Werte pxfür Ihre Schriftgröße verwenden.

Demo

Wie Sie sehen, ist eine dynamische Schriftgröße dank clamp()und- calc()Funktionen nur mit CSS3 möglich. Wenn Sie tiefer in verschiedene Lösungen für dynamische Schriftgrößen eintauchen möchten, empfehle ich Ihnen dringend, diesen Artikel zu lesen:
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/.

Danke fürs Lesen!
Bleiben Sie gesund und der Friede sei mit Ihnen!