Deklaravus šrifto dydį peržiūros srities vienetuose, galima gauti tikrai įdomių rezultatų, tačiau tai kelia iššūkių. CSS nėra min-font-sizearba nėra max-font-sizeypatybių, todėl sunku išspręsti kraštinius atvejus, kai tekstas tampa per mažas arba per didelis.
Šis „Sass“ rinkinys naudoja žiniasklaidos užklausas, kad nustatytų mažiausią ir didžiausią šrifto dydį pikseliais. Jis taip pat palaiko pasirinktinį parametrą, kuris bus naudojamas kaip atsarginės naršyklės, kurios nepalaiko peržiūros srities vienetų.
Pavyzdžiui, šitaip apibrėžtumėte šriftą kaip 5vwribotą tarp 35pxir 150px(su 50pxnepalaikančių naršyklių atsargine versija ):
@include responsive-font(5vw, 35px, 150px, 50px);Ir čia yra visas derinys:
/// /// Viewport sized typography with minimum and maximum values /// /// @author Eduardo Boucas (@eduardoboucas) /// /// @param (Number) $responsive - Viewport-based size /// @param (Number) $min - Minimum font size (px) /// @param (Number) $max - Maximum font size (px) /// (optional) /// @param (Number) $fallback - Fallback for viewport- /// based units (optional) /// /// @example scss - 5vw font size (with 50px fallback), /// minumum of 35px and maximum of 150px /// @include responsive-font(5vw, 35px, 150px, 50px); /// @mixin responsive-font($responsive, $min, $max: false, $fallback: false) ( $responsive-unitless: $responsive / ($responsive - $responsive + 1); $dimension: if(unit($responsive) == 'vh', 'height', 'width'); $min-breakpoint: $min / $responsive-unitless * 100; @media (max-#($dimension): #($min-breakpoint)) ( font-size: $min; ) @if $max ( $max-breakpoint: $max / $responsive-unitless * 100; @media (min-#($dimension): #($max-breakpoint)) ( font-size: $max; ) ) @if $fallback ( font-size: $fallback; ) font-size: $responsive; )Demonstracija
„CodePen“ rasite Eduardo Bouçaso (@eduardoboucas) „Pen Viewport“ dydžio tipografiją su mažiausiais ir didžiausiais dydžiais.