Typografia płynów - CSS-Tricks | Fragmenty kodu 2025

Przechodząc od razu do kodu, oto działająca implementacja:

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

Warto przyjrzeć się naszemu nowszemu postowi Uproszczona typografia płynów, aby uzyskać praktyczne, zaciśnięte, oparte na rzutni.

Że skala font-sizeod minimum 16px (w widoku z na 320) do maksymalnie 22px (przy 1000px wziernika). Oto demo tego, ale jako Sass @mixin (co omówimy później).

Zobacz przykład pióra typu Fluid Type w Sass autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Sass został użyty tylko po to, aby nieco ułatwić wygenerowanie tego wyniku, a także dlatego, że w grę wchodzi odrobina matematyki. Spójrzmy.

Używając jednostek rzutni i calc(), możemy dostosować rozmiar czcionki (i inne właściwości) do rozmiaru ekranu. Dlatego zamiast zawsze mieć ten sam rozmiar lub przeskakiwać z jednego rozmiaru do drugiego w zapytaniach o media, rozmiar może być płynny.

Oto matematyka, uznanie Mike'a Riethmullera:

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

Powodem, dla którego matematyka jest trochę skomplikowana, jest to, że staramy się uniknąć sytuacji, w której typ będzie mniejszy niż nasze minimum lub większe niż nasze maksimum, co jest bardzo łatwe w przypadku jednostek widoczności.

Na przykład, jeśli chcemy, aby rozmiar naszej czcionki mieścił się w zakresie, w którym 14pxjest to minimalny rozmiar przy najmniejszej szerokości rzutni 300pxi gdzie 26pxjest maksymalny rozmiar przy największej szerokości widoku 1600px, to nasze równanie wygląda następująco:

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

Tekst zmienia się płynnie na szerokość rzutni

Zobacz Pen JEVevK autorstwa CSS-Tricks (@ css-tricks) na CodePen.

Aby zablokować te minimalne i maksymalne rozmiary, pomocne jest użycie tej matematyki w zapytaniach o media. Oto kilka Sassów, które pomogą…

W Sass

Możesz stworzyć (całkiem solidną) mieszankę, na przykład:

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

Którego używasz w ten sposób:

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

Oto kolejny przykład Mike'a, który pozwala uzyskać właściwy płynny rytm:

Rozszerzenie pomysłu na nagłówki ze skalą modułową

Skala modułowa, co oznacza, że im więcej dostępnej przestrzeni, tym bardziej dramatyczne są różnice w wielkości. Być może w największym widocznym obszarze z każdym nagłówkiem w górę hierarchii jest 1,4x większy niż następny, ale w najmniejszym tylko 1,05x.

Obejrzeć zobaczyć:

„Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ skradziony @MikeRiethmuller jest teraz dostępny na blogach @CodePen. W tym „Fluid Modular Scale!” pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 października 2016

Z naszym mixinem Sass wygląda to tak:

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