Typografie tekutin - Triky CSS | Úryvky kódu 2025

Získání práva na kód, tady je funkční implementace:

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; ) )

Stojí za to podívat se na náš novější příspěvek Zjednodušená fluidní typografie pro praktické, upnuté, velikost výřezu typu.

To by se font-sizeškálovalo od minima 16px (ve výřezu 320px) po maximálně 22px (ve výřezu 1000px). Zde je ukázka toho, ale jako Sass @mixin (kterému se budeme věnovat později).

Podívejte se na příklad základny pera typu Fluid w Sass od Chrisa Coyiera (@chriscoyier) na CodePen.

Sass byl použit jen proto, aby byl tento výstup o něco snazší generovat, a skutečnost, že jde o závan matematiky. Podívejme se.

Pomocí výřezových jednotek a calc()můžeme nechat velikost písma (a další vlastnosti) upravit jejich velikost na základě velikosti obrazovky. Takže spíše než být vždy stejné velikosti, nebo skákat z jedné velikosti do druhé při mediálních dotazech, může být velikost proměnlivá.

Zde je matematika, úvěr Mike Riethmuller:

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

Důvod, proč je matematika trochu komplikovaná, spočívá v tom, že se snažíme zabránit tomu, aby se typ stále zmenšoval nad naše minimum nebo byl větší než naše maximum, což je u jednotek výřezu velmi snadné.

Například pokud chceme, aby naše velikost písma byla v rozsahu, kde 14pxje minimální velikost při nejmenší šířce výřezu 300pxa kde 26pxje maximální velikost při největší šířce výřezu 1600px, pak naše rovnice vypadá takto:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )

Podívejte se na Pen JEVevK od CSS-Tricks (@ css-tricks) na CodePen.

Chcete-li uzamknout tyto minimální a maximální velikosti, pomůže vám tato matematika v mediálních dotazech. Tady je Sass, který vám pomůže…

V Sass

Můžete vytvořit (docela robustní) mixin, jako je tento:

@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; ) ) ) )

Které používáte takto:

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

Tady je další Mikeův příklad, jak dosáhnout správného rytmu tekutin:

Rozšíření myšlenky na záhlaví s modulární stupnicí

Modulární měřítko, což znamená, čím více dostupného prostoru, tím dramatičtější je rozdílná velikost. Možná v největším výřezu s je každá hlavička v hierarchii 1,4x větší než ta následující, ale v nejmenším pouze 1,05x.

Zobrazit pohled:

„Fluid Type“ i̶n froms̶p̶i̶r̶e̶d̶ ukradený z @MikeRiethmuller nyní žije na blogech @CodePen. Včetně „Fluid Modular Scale!“ pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27. října 2016

S naším mixem Sass to vypadá jako:

$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); )