Fondisuuruse deklareerimine vaateava ühikutes võib anda tõeliselt huvitavaid tulemusi, kuid sellega kaasnevad ka väljakutsed. CSS-is pole ühtegi omadust min-font-sizeega max-font-sizeomadust, seega on äärepoolseid juhtumeid, kus tekst muutub liiga väikeseks või liiga suureks, raskesti lahendada.
See Sassi miksi kasutab meediumipäringuid, et määratleda fondi minimaalne ja maksimaalne suurus pikslites. Samuti toetab see valikulist parameetrit, mis on varukoopia brauseritele, mis ei toeta vaateava üksusi.
Näiteks defineerite fondi nii, et see oleks 5vwpiiratud 35pxja 150px( 50pxmitte-toetavate brauserite puhul varundusega ):
@include responsive-font(5vw, 35px, 150px, 50px);Ja siin on täielik segu:
/// /// 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
Vaadake CodePenilt Eduardo Bouçase (@eduardoboucas) Pen Viewport suurusega tüpograafiat minimaalse ja maksimaalse suurusega.