Deklarování velikostí písma v jednotkách výřezu může přinést opravdu zajímavé výsledky, ale přichází s výzvami. V CSS nejsou žádné vlastnosti min-font-sizenebo max-font-sizevlastnosti, takže okrajové případy, kdy je text příliš malý nebo příliš velký, je obtížné vyřešit.
Tento mix Sass využívá mediálních dotazů k definování minimální a maximální velikosti písma v pixelech. Podporuje také volitelný parametr, který slouží jako záložní pro prohlížeče, které nepodporují jednotky výřezu.
Jako příklad je to, jak byste definovali písmo jako 5vwomezené mezi 35pxa 150px(se zálohou 50pxpro nepodporující prohlížeče):
@include responsive-font(5vw, 35px, 150px, 50px);A tady je kompletní mixin:
/// /// 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; )Ukázka
Podívejte se na typografii velikosti pera Viewport s minimální a maximální velikostí od Eduarda Bouçase (@eduardoboucas) na CodePen.