header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Lembach's nichtkommerzielle Website rund um CMSimple_XH
Templates, Plugins, Tools, Programme
und Tips und Tricks die mir wichtig sind
Sie sind hier: Startseite > Tipps und Tricks zusammengetragen > Responsive Schriftgrößen mit CSS calc()

Responsive Schriftgrößen mit CSS calc()

= Dynamische Schriftgröße (Quelle)

Mit Hilfe der CSS-Funktion calc() kann der Text automatisch zwischen einem minimalen und einem maximalen Wert skaliert werden.

Wenn ihr möchtet, dass der Text bei 320 Pixeln Viewport-Breite 10 Pixel groß ist und bei 1920 Pixeln Viewport-Breite 28 Pixel, dann ist folgende Formel notwendig:

body {
 font-size: calc(10px + (28 - 10) * ((100vw - 320px) / (1920 - 320)));
}

Beispiel anschauen

Erklärung der Formel

Die oben gezeigte calc()-Funktion basiert auf folgender Formel:

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Eine detaillierte Erklärung der Formel findet ihr u.a. beim Smashing Magazine.


| Seitenanfang |