Å erklære skriftstørrelser i visningsenheter kan gi veldig interessante resultater, men det kommer med utfordringer. Det er ingen min-font-sizeeller max-font-sizeegenskaper i CSS, så kant tilfeller der teksten blir for liten eller for stor er vanskelig å håndtere.
Denne Sass-blandingen bruker mediespørsmål for å definere en minimums- og maksimumsstørrelse for skriften, i piksler. Den støtter også en valgfri parameter for å fungere som en reserve for nettlesere som ikke støtter visningsenheter.
Som et eksempel, dette er hvordan du vil definere en skrift som 5vwbegrenset mellom 35pxog 150px(med en tilbakebetaling på 50pxfor ikke-støttende nettlesere):
@include responsive-font(5vw, 35px, 150px, 50px);Og her er den fullstendige blandingen:
/// /// 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 typografi med Pen Viewport-størrelse med minimums- og maksimumsstørrelser av Eduardo Bouças (@eduardoboucas) på CodePen.