Das Deklarieren von Schriftgrößen in Ansichtsfenstereinheiten kann zu wirklich interessanten Ergebnissen führen, ist jedoch mit Herausforderungen verbunden. Es gibt keine min-font-sizeoder max-font-sizeEigenschaften in CSS, daher ist es schwierig, Randfälle zu behandeln, in denen Text zu klein oder zu groß wird.
Dieses Sass-Mixin verwendet Medienabfragen, um eine minimale und maximale Größe für die Schriftart in Pixel zu definieren. Es unterstützt auch einen optionalen Parameter, der als Ersatz für Browser dient, die keine Ansichtsfenstereinheiten unterstützen.
Auf diese Weise definieren Sie beispielsweise eine Schriftart als 5vweingeschränkt zwischen 35pxund 150px(mit einem Fallback von 50pxfür nicht unterstützende Browser):
@include responsive-font(5vw, 35px, 150px, 50px);Und hier ist das vollständige 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
Sehen Sie sich die Typografie mit Pen Viewport-Größe mit minimalen und maximalen Größen von Eduardo Bouças (@eduardoboucas) auf CodePen an.