Deklariranje velikosti pisav v enotah za prikaz lahko prinese res zanimive rezultate, vendar ima res izzive. V CSS ni nobenih lastnosti min-font-sizeali max-font-sizelastnosti, zato je robove, ko je besedilo premajhno ali preveliko, težko rešiti.
Ta mešanica Sass uporablja medijske poizvedbe za določitev najmanjše in največje velikosti pisave v slikovnih pikah. Podpira tudi neobvezni parameter, ki služi kot nadomestni del za brskalnike, ki ne podpirajo enot za prikaz.
Kot primer bi tako določili pisavo, ki je 5vwomejena med 35pxin 150px(z nadomestitvijo 50pxza brskalnike, ki ne podpirajo):
@include responsive-font(5vw, 35px, 150px, 50px);In tukaj je celotna mešanica:
/// /// 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
Oglejte si tipografijo Pen Viewport z najmanjšo in največjo velikostjo Eduarda Bouçasa (@eduardoboucas) na CodePen.