css - 如何实现最大字体大小？

Question

我想使用 vw 指定我的字体大小，如

font-size: 3vw;

但是，我还想将字体大小限制为 36px。我怎样才能达到 max-font-size 的等价物，它不存在——是使用媒体查询的唯一选择？

Answer 1

font-size: 3vw; 表示字体大小为视口(viewport)宽度的 3%。因此，当视口(viewport)宽度为 1200px 时 - 字体大小将为 3% * 1200px = 36px。

因此，使用单个媒体查询覆盖默认的 3vw 字体大小值可以轻松实现 36px 的最大字体大小。

Codepen demo (调整浏览器大小)

div {
  font-size: 3vw;
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>hello</div>

---

更新:使用新的 CSS min() function ，我们可以简化上面的代码——不使用媒体查询(caniuse)

div {
  font-size: min(3vw, 36px);
}

在上面的示例中，字体大小最多为 36px，但如果视口(viewport)宽度小于 1200px(其中 3vw 计算的值小于 36px)，字体大小将减小到 3vw

---

话虽这么说，以上述方式为 font-size 使用视口(viewport)单位是有问题的，因为当视口(viewport)宽度小得多时 - 比如 320px - 那么渲染的字体大小将变为 0.03 x 320 = 9.6px 非常(太)小了。

为了克服这个问题，我可以推荐使用一种叫做 Fluid Type 的技术。又名 CSS Locks .

A CSS lock is a specific kind of CSS value calculation where:

• there is a minimum value and a maximum value,
• and two breakpoints (usually based on the viewport width),
• and between those breakpoints, the actual value goes linearly from the minimum to the maximum.

假设我们要应用上述技术，使得最小字体大小在 600 像素或更小的视口(viewport)宽度下为 16 像素，并且会线性增加，直到在 1200 像素的视口(viewport)宽度下达到最大值 32 像素。

这可以表示如下(有关详细信息，请参阅 this CSS-tricks article):

div {
  font-size: 16px;
}
@media screen and (min-width: 600px) {
  div {
    font-size: calc(16px + 16 * ((100vw - 600px) / 600));
  }
}
@media screen and (min-width: 1200px) {
  div {
    font-size: 32px;
  }
}

或者，我们可以使用 this SASS mixin它为我们做了所有的数学运算，所以 CSS 看起来像这样:

/* 
     1) Set a min-font-size of 16px when viewport width < 600px
     2) Set a max-font-size of 32px when viewport width > 1200px and
     3) linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px 
*/

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}

// ----
// libsass (v3.3.6)
// ----

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//                                                                         
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

// Usage:
// ======

// /* Single property */
// html {
//   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }

// /* Multiple properties with same values */
// h1 {
//   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }

////////////////////////////////////////////////////////////////////////////

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>Responsive Typography technique known as Fluid Type or CSS Locks. 
  Resize the browser window to see the effect.
</div>

Codepen Demo

---

更新:我们可以使用新的clamp() CSS function ( caniuse ) 将上述代码重构为:

div {
  font-size: clamp(16px, 3vw, 32px);
}

参见 MDN :

clamp() allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

--

---

延伸阅读

Fluid Typography

How Do You Do max-font-size in CSS?

Fluid Responsive Typography With CSS Poly Fluid Sizing

Non-linear interpolation in CSS