Fontu izmēru deklarēšana skata loga vienībās var radīt patiešām interesantus rezultātus, taču tas rada problēmas. CSS nav min-font-sizevai nav max-font-sizerekvizītu, tāpēc ir grūti tikt galā ar malējiem gadījumiem, kad teksts kļūst pārāk mazs vai pārāk liels.
Šajā Sass kombinācijā tiek izmantoti multivides vaicājumi, lai noteiktu minimālo un maksimālo fonta lielumu pikseļos. Tas atbalsta arī izvēles parametru, kas kalpo kā rezerves pārlūkprogrammām, kuras neatbalsta skata vienības.
Piemēram, tas ir, kā jūs definētu fontu kā 5vwierobežotas starp 35pxun 150px(ar atkāpšanās no 50pxne-atbalsta pārlūkiem):
@include responsive-font(5vw, 35px, 150px, 50px);Un šeit ir pilns sajaukums:
/// /// 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; )Demonstrācija
CodePen skatiet Eduardo Bouças (@eduardoboucas) veidlapu Pen Viewport izmēra tipogrāfijā ar minimālajiem un maksimālajiem izmēriem.