Tipografía de tamaño de ventana gráfica con tamaños mínimo y máximo - Trucos CSS

Declarar tamaños de fuente en unidades de ventana gráfica puede producir resultados realmente interesantes, pero conlleva desafíos. No hay propiedades min-font-sizeo max-font-sizeen CSS, por lo que los casos extremos en los que el texto se vuelve demasiado pequeño o demasiado grande son difíciles de manejar.

Este mixin de Sass hace uso de consultas de medios para definir un tamaño mínimo y máximo para la fuente, en píxeles. También admite un parámetro opcional que sirve como respaldo para los navegadores que no admiten unidades de ventana gráfica.

Como ejemplo, así es como definiría una fuente como 5vwrestringida entre 35pxy 150px(con un 50pxrespaldo de para navegadores no compatibles):

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

Y aquí está el mixin completo:

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