Görüntü alanı birimlerinde yazı tipi boyutlarını bildirmek gerçekten ilginç sonuçlar üretebilir, ancak zorlukları da beraberinde getirir. CSS'de min-font-sizeveya max-font-sizeözellik yoktur , bu nedenle metnin çok küçük veya çok büyük olduğu uç durumlarla başa çıkmak zordur.
Bu Sass karışımı, piksel cinsinden yazı tipi için minimum ve maksimum boyutu tanımlamak için ortam sorgularından yararlanır. Ayrıca, görüntü alanı birimlerini desteklemeyen tarayıcılara yedek olarak hizmet etmek için isteğe bağlı bir parametreyi de destekler.
Örnek olarak, bu gibi bir fontu tespit şey mi 5vwarasına kısıtlı 35pxve 150px(bir yedek kullanımıyla 50pxolmayan destekleyici tarayıcılar için):
@include responsive-font(5vw, 35px, 150px, 50px);Ve işte tam karışım:
/// /// 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
CodePen'de Eduardo Bouças (@eduardoboucas) tarafından minimum ve maksimum boyutlarda Pen Viewport boyutlu tipografiye bakın.