Типографија величине видног поља са минималном и максималном величином - ЦСС-трикови

Објављивање величина фонта у јединицама за приказ може да доведе до заиста занимљивих резултата, али има и изазова. Не постоје min-font-sizeили max-font-sizeсвојства у ЦСС, тако да ивица случајеви у којима текст добија премало или превише велики је тешко да се баве.

Овај Сассов микс користи медијске упите за одређивање минималне и максималне величине фонта, у пикселима. Такође подржава необавезни параметар који служи као резервни део за прегледаче који не подржавају јединице приказа.

Као пример, овако бисте дефинисали фонт који је 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; )