Het aangeven van lettergroottes in viewport-eenheden kan echt interessante resultaten opleveren, maar het brengt wel uitdagingen met zich mee. Er zijn geen min-font-sizeof max-font-sizeeigenschappen in CSS, dus randgevallen waarbij tekst te klein of te groot wordt, zijn moeilijk om mee om te gaan.
Deze Sass-mixin maakt gebruik van mediaquery's om een minimale en maximale lettergrootte in pixels te definiëren. Het ondersteunt ook een optionele parameter om te dienen als een terugval naar browsers die geen viewport-eenheden ondersteunen.
Dit is bijvoorbeeld hoe u een lettertype definieert als 5vwbeperkt tussen 35pxen 150px(met een terugval van 50pxvoor niet-ondersteunende browsers):
@include responsive-font(5vw, 35px, 150px, 50px);En hier is de volledige 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
Zie de typografie van het formaat Pen Viewport met minimum en maximum formaten door Eduardo Bouças (@eduardoboucas) op CodePen.