CSS clamp() Rechner

Gut zu wissen

So funktioniert clamp()

clamp(Minimum, bevorzugter Wert, Maximum) nimmt den mittleren Wert, solange er zwischen den Grenzen liegt. Der bevorzugte Wert kombiniert eine feste Größe mit einem Anteil der Bildschirmbreite (vw), deshalb wächst er stufenlos mit.

Warum rem statt px

Wer im Browser eine größere Grundschrift einstellt, erwartet größere Texte. Mit rem wachsen Minimum und Maximum mit dieser Einstellung, mit px nicht. Für Schriftgrößen ist rem deshalb die bessere Wahl.

Und was hat das mit SEO zu tun?

Google bewertet die mobile Version einer Seite. Texte, die auf dem Smartphone zu klein sind oder Layouts, die verspringen, schaden der Nutzererfahrung. Flüssige Größen ersetzen viele Media Queries und machen Layouts stabiler – mehr dazu untertechnisches SEO.