Типография с оглед с минимален и максимален размер - CSS-трикове

Декларирането на размерите на шрифтовете в единиците за визуализация може да доведе до наистина интересни резултати, но има и предизвикателства. В CSS няма min-font-sizeили има max-font-sizeсвойства, така че крайните случаи, когато текстът става твърде малък или твърде голям, са трудни за справяне.

Този микс на Sass използва медийни заявки, за да определи минимален и максимален размер на шрифта в пиксели. Той също така поддържа незадължителен параметър, който да служи като резервен вариант за браузъри, които не поддържат единици за изглед.

Като пример ето как бихте определили шрифт като 5vwограничен между 35pxи 150px(с резервен вариант 50pxза неподдържащи браузъри):

@include responsive-font(5vw, 35px, 150px, 50px);

И ето пълният миксин:

/// /// 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; )