Tipografia fluidelor - CSS-Tricks | Fragmente de cod 2025

Pentru a ajunge direct la cod, iată o implementare funcțională:

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

Merită să ne uităm la postarea noastră mai recentă Tipografie simplificată a fluidelor pentru dimensionare practică, blocată, bazată pe tip viewport.

Acest lucru ar scala de font-sizela un minim de 16 px (la o vizualizare de 320 px) la un maxim de 22 px (la o vizualizare de 1000 px). Iată o demonstrație a acestui lucru, dar ca Sass @mixin (pe care o vom acoperi mai târziu).

Vedeți Exemplul de bază a stiloului de tip fluid Wass de Chris Coyier (@chriscoyier) pe CodePen.

Sass a fost folosit doar pentru a face ca ieșirea să devină puțin mai ușor de generat și pentru faptul că există o serie de matematică implicate. Hai să aruncăm o privire.

Folosind unități de vizualizare și calc(), putem avea dimensiunea fontului (și alte proprietăți) să le ajusteze dimensiunea în funcție de dimensiunea ecranului. Deci, mai degrabă decât să aibă întotdeauna aceeași dimensiune sau să sară de la o dimensiune la alta la interogările media, dimensiunea poate fi fluidă.

Iată matematica, credit Mike Riethmuller:

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

Motivul pentru care matematica este puțin complicată este că încercăm să evităm ca tipul să devină mai mic decât minimul sau mai mare decât maximul nostru, ceea ce este foarte ușor de făcut cu unitățile de vizualizare.

De exemplu, dacă dorim dimensiunea fontului nostru într-un interval în care 14pxeste dimensiunea minimă la cea mai mică lățime a ferestrei 300pxși unde 26pxeste dimensiunea maximă la cea mai mare lățime a ferestrei 1600px, atunci ecuația noastră arată astfel:

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

Textul se modifică fluid la lățimea ecranului

Vedeți Pen JEVevK de CSS-Tricks (@ css-tricks) pe CodePen.

Pentru a bloca acele dimensiuni minime și maxime, vă ajută să utilizați această matematică în interogările media. Iată câteva Sass pentru a ajuta ...

În Sass

Ați putea face un mixin (destul de robust), astfel:

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

Pe care îl folosiți astfel:

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

Iată un alt exemplu al lui Mike, obținând un ritm fluid pe măsură:

Extinderea ideii la anteturi cu scară modulară

Scară modulară, adică cu cât este mai mult spațiu disponibil, cu atât este mai dramatică cu cât este diferită ca dimensiune. Poate că la cel mai mare ecran cu, fiecare antet în sus ierarhia este cu 1,4x mai mare decât următorul, dar la cel mai mic, doar 1,05x.

Vedeți vizualizarea:

„Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ furat de la @MikeRiethmuller live acum pe blogurile @CodePen. Inclusiv „Scală modulară fluidă!” pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 octombrie 2016

Cu mixerul nostru Sass, arată ca:

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