La déclaration des tailles de police dans les unités de fenêtre peut produire des résultats vraiment intéressants, mais cela comporte des défis. Il n'y a pas de propriétés min-font-sizeou max-font-sizedans CSS, donc les cas marginaux où le texte devient trop petit ou trop grand sont difficiles à gérer.
Ce mixin Sass utilise des requêtes multimédias pour définir une taille minimale et maximale pour la police, en pixels. Il prend également en charge un paramètre facultatif pour servir de solution de secours aux navigateurs qui ne prennent pas en charge les unités de fenêtre.
À titre d'exemple, voici comment définir une police comme 5vwcontrainte entre 35pxet 150px(avec un remplacement de 50pxpour les navigateurs non compatibles):
@include responsive-font(5vw, 35px, 150px, 50px);Et voici le mixin complet:
/// /// 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; )Démo
Voir la typographie de taille Pen Viewport avec des tailles minimale et maximale par Eduardo Bouças (@eduardoboucas) sur CodePen.