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

font-size: 3vw;

但是，我也想将字体大小限制为36px。我如何才能获得与等效的max-font-size，这是使用媒体查询的唯一选择？

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

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

Codepen演示（调整大小浏览器）

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

<div>hello</div>

更新：使用新的CSS min（）函数，我们可以简化以上代码-无需使用媒体查询（caniuse）

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

在上面的示例中，字体大小最多为36px，但是如果视口的宽度小于1200px（其中3vw的值小于36px），则它将减小为3vw。

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

为了克服这个问题，我建议您使用一种称为Fluid Type AKA CSS Locks的技术。

CSS锁是一种特定类型的CSS值计算，其中：

• 有一个最小值和一个最大值，
• 和两个断点（通常基于视口宽度），
• 在这些断点之间，实际值从最小值到最大值线性变化。

假设我们要应用上述技术，以使最小字体大小在600px或更小的视口宽度下为16px，并且将线性增加，直到在1200px的视口宽度达到最大32px为止。

可以表示如下（有关更多详细信息，请参见此CSS技巧文章）：

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;
  }
}

或者，我们可以使用此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演示

更新：我们可以使用新的clip （）CSS函数（caniuse）将上述代码重构为：

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

参见MDN：

clamp（）允许您设置字体大小，该字体大小会随着视口的大小而增加，但不会低于最小字体大小或最大字体大小。它具有与Fluid Typography中的代码相同的效果，但只使用一行，而无需使用媒体查询。

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>

-

进一步阅读

流体印刷

您如何在CSS中使用max-font-size？

CSS Poly Fluid Sizing的流体响应式排版

CSS中的非线性插值

这是另一个想法。calc函数使用双精度浮点数。因此，它在1e18附近表现出阶跃函数。例如，

width: calc(6e18px + 100vw - 6e18px);

这将捕捉到值0px，1024px，2048px等。请参见pen https://codepen.io/jdhenckel/pen/bQNgyW

步进功能可通过一些聪明的数学运算来创建绝对值和最小/最大。例如

max(x, y) = x - (x + y) * step(y - x)

当z <0时，给定的步骤（z）为零，否则为1。

只是一个想法，不是很实用，但是尝试起来可能很有趣。

（注意：此技术取决于没有任何规范的实现细节；当前，它可在Chrome和Safari中使用，但不能在Firefox，Edge或Internet Explorer中使用，后者不对CSS值使用双精度浮点数。）

另一种方法是缓慢增加字体大小，这不会限制最大字体大小，但是即使在非常宽的屏幕上，它也会看起来更好。不能以完美的方式回答问题，但它的1行...

font-size: calc(16px + 1vw);

更新：改进了CSS，我建议使用以下clamp(min, preferred, max)功能：

font-size: clamp(12px, 2vw, 20px);

在某个时候，font-size超出36px比例尺右边，找到那个。假设超过width: 2048px：

@media screen and (min-width: 2048px) {
  .selector {
     font-size: 36px;
  }
}

是的，很遗憾，您需要使用@media查询。我希望这不会有任何影响。