Flüssigkeitstypographie - CSS-Tricks

Anonim

Um zum Code zu gelangen, hier eine funktionierende Implementierung:

html ( font-size: 16px; ) @media screen and (min-width: 320px) ( html ( font-size: calc(16px + 6 * ((100vw - 320px) / 680)); ) ) @media screen and (min-width: 1000px) ( html ( font-size: 22px; ) )

In unserem neueren Beitrag Simplified Fluid Typography finden Sie eine praktische, geklemmte, auf Ansichtsfenstern basierende Schriftgröße.

font-sizeDies würde von einem Minimum von 16 Pixel (bei einem 320px-Ansichtsfenster) auf ein Maximum von 22px (bei einem 1000px-Ansichtsfenster) skaliert. Hier ist eine Demo davon, aber als Sass @mixin (auf die wir später noch eingehen werden).

Siehe das Stiftbasisbeispiel für den Flüssigkeitstyp w Sass von Chris Coyier (@chriscoyier) auf CodePen.

Sass wurde nur verwendet, um die Generierung dieser Ausgabe zu vereinfachen und um die Tatsache zu berücksichtigen, dass es sich um einen Hauch von Mathematik handelt. Lass uns einen Blick darauf werfen.

Mithilfe von Ansichtsfenstereinheiten und calc()können die Schriftgröße (und andere Eigenschaften) ihre Größe basierend auf der Größe des Bildschirms anpassen. Anstatt immer dieselbe Größe zu haben oder bei Medienabfragen von einer Größe zur nächsten zu springen, kann die Größe fließend sein.

Hier ist die Mathematik, Kredit Mike Riethmüller:

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

Der Grund, warum Mathematik etwas kompliziert ist, ist, dass wir versuchen zu vermeiden, dass der Typ jemals kleiner als unser Minimum oder größer als unser Maximum wird, was mit Ansichtsfenstereinheiten sehr einfach ist.

Wenn wir beispielsweise unsere Schriftgröße in einem Bereich haben möchten, in dem 14pxdie minimale Größe bei der kleinsten Ansichtsfensterbreite von 300pxund wo 26pxdie maximale Größe bei der größten Ansichtsfensterbreite von ist 1600px, sieht unsere Gleichung folgendermaßen aus:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )
Der Text ändert sich fließend in die Breite des Ansichtsfensters

Siehe den Stift JEVevK von CSS-Tricks (@ css-Tricks) auf CodePen.

Um diese minimalen und maximalen Größen festzulegen, hilft die Verwendung dieser Mathematik in Medienabfragen. Hier ist etwas Sass, um zu helfen ...

In Sass

Sie könnten ein (ziemlich robustes) Mixin wie folgt erstellen:

@function strip-unit($value) ( @return $value / ($value * 0 + 1); ) @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) ( $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 ( & ( font-size: $min-font-size; @media screen and (min-width: $min-vw) ( font-size: calc(#($min-font-size) + #(strip-unit($max-font-size - $min-font-size)) * ((100vw - #($min-vw)) / #(strip-unit($max-vw - $min-vw)))); ) @media screen and (min-width: $max-vw) ( font-size: $max-font-size; ) ) ) )

Was du so benutzt:

$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px; html ( @include fluid-type($min_width, $max_width, $min_font, $max_font); )

Hier ist ein weiteres Beispiel von Mike, bei dem der flüssige Rhythmus genau richtig ist:

Erweiterung der Idee auf Header mit modularer Skalierung

Modulare Skalierung: Je mehr Platz zur Verfügung steht, desto dramatischer ist die Größe. Vielleicht ist im größten Ansichtsfenster mit jeder Kopfzeile in der Hierarchie das 1,4-fache größer als das nächste, im kleinsten jedoch nur das 1,05-fache.

Siehe Ansicht:

Mit unserem Sass-Mixin sieht das so aus:

$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h2 ( font-size: $mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h3 ( font-size: $mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font); )

Andere Lesart

  • Flexible Typografie mit CSS-Sperren von Tim Brown
  • Holen Sie sich das richtige Gleichgewicht: Responsive Display Text von Richard Rutter
  • Beispiele für Flüssigkeitstypen von Mike Riethmüller