CSS - Die Schriftgröße je nach Fensterbreite automatisch anpassen

Mit der CSS-Angabe: font-size: clamp(1rem, 1.5vw, 2rem); kann die Schriftgröße je nach Fensterbreite automatisch angepasst werden. Die erste Angabe 1rem ist die kleinste Wert, 1.5vw ist der Mittelwert und 2rem ist der größte Wert.

Beispiele

<div style="font-size: clamp(1rem, 1.5vw, 2rem);">Text</div>
Die Schriftgröße dieses Textes hängt von der Basisschriftart der Seite und der Größe des Ansichtsfensters ab.

<div style="font-size: clamp(1.5rem, 2vw, 2.5rem);">Text</div>
Die Schriftgröße dieses Textes hängt von der Basisschriftart der Seite und der Größe des Ansichtsfensters ab.

<div style="font-size: clamp(1rem, 5vw, 2rem);">Text</div>
Die Schriftgröße dieses Textes hängt von der Basisschriftart der Seite und der Größe des Ansichtsfensters ab.

<div style="font-size: clamp(0.5rem, 2.5vw, 5rem);">Text</div>
Die Schriftgröße dieses Textes hängt von der Basisschriftart der Seite und der Größe des Ansichtsfensters ab.

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<aside> Nebeninhalt

CSS - Pink-Cube-Animation

PHP - CSV-Datei auslesen

JavaScript - Prüfen, ob die Funktion vor dem Aufruf vorhanden ist

MySQL - Höchstwert einer Tabellenspalte ermitteln

Schlechte Grafiken
Bevor Sie eine schlechte Grafik verwenden, verzichten Sie lieber darauf. Schlechte Grafiken sind zum Beispiel solche mit einer anderen Hintergrundfarbe als die der Homepage. Auch den Aliasing-Effekt, bei dem die Grafik einen hässlichen Treppenstufen-Effekt hat, sollten Sie vermeiden. Verwenden Sie dazu die Anti-Aliasing, beziehungsweise Glätten-Funktion Ihres Grafikprogrammes. Schlecht sind auch schief gescannte und oder verwaschene Logos und ausgefranste Grafiken.