At erklære skriftstørrelser i visningsenheder kan give virkelig interessante resultater, men det kommer med udfordringer. Der er ingen min-font-sizeeller max-font-sizeegenskaber i CSS, så kanttilfælde, hvor teksten bliver for lille eller for stor, er svære at håndtere.
Denne Sass-mixin bruger medieforespørgsler til at definere en minimums- og maksimumstørrelse for skrifttypen i pixels. Det understøtter også en valgfri parameter, der fungerer som en reserve til browsere, der ikke understøtter visningsenheder.
Som et eksempel er det sådan, du vil definere en skrifttype som 5vwbegrænset mellem 35pxog 150px(med et tilbagefald på 50pxikke-understøttende browsere):
@include responsive-font(5vw, 35px, 150px, 50px);Og her er den fulde 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; )Demo
Se typografien med Pen Viewport-størrelse med minimums- og maksimumstørrelser af Eduardo Bouças (@eduardoboucas) på CodePen.