Att deklarera teckensnittsstorlekar i visningsenheter kan ge riktigt intressanta resultat, men det kommer med utmaningar. Det finns inga min-font-sizeeller max-font-sizeegenskaper i CSS, så kantfall där texten blir för liten eller för stor är svåra att hantera.
Denna Sass-mixning använder mediefrågor för att definiera en minsta och maximala storlek för teckensnittet i pixlar. Den stöder också en valfri parameter för att fungera som reserv till webbläsare som inte stöder visningsenheter.
Som ett exempel, så skulle du definiera ett teckensnitt som 5vwbegränsat mellan 35pxoch 150px(med en reserv 50pxför icke-stödjande webbläsare):
@include responsive-font(5vw, 35px, 150px, 50px);Och här är hela mixen:
/// /// 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-storlek med minsta och största storlek av Eduardo Bouças (@eduardoboucas) på CodePen.