具有最小和最大尺寸的视口大小的字体

在视口单位中声明字体大小可以产生非常有趣的结果，但它也伴随着挑战。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;
}

演示

查看 Eduardo Bouças 在 CodePen 上的笔 具有最小和最大尺寸的视口大小的字体（@eduardoboucas）。