Css 如何实现最大字体大小？

我想使用

vw

指定字体大小，如中所示

font-size: 3vw;

---

但是，我还想将字体大小限制为36px。我如何才能达到与

最大字体大小

相等的效果，这是不存在的--是使用媒体查询的唯一选项？

在某些情况下，

字体大小

超出了

36px

的比例，请找到。假设，当

宽度：2048px

：

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

---

是的，很遗憾，您需要使用

@media

查询。我希望这不会影响任何事情。

在某一点上，

字体大小超过了
36px
的比例，找到它。假设，当
宽度：2048px
：

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

是的，很遗憾，您需要使用
@media
查询。我希望这不会影响任何事情。
代码>字体大小：3vw表示字体大小为视口宽度的3%。因此，当视口宽度为1200px时，字体大小将为3%*1200px=36px

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

（调整浏览器大小）

div{
字体大小：3vw；
}
@媒体屏幕和屏幕（最小宽度：1200px）{
div{
字体大小：36px；
}
}
你好
字体大小：3vw表示字体大小为视口宽度的3%。因此，当视口宽度为1200px时，字体大小将为3%*1200px=36px

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

（调整浏览器大小）

div{
字体大小：3vw；
}
@媒体屏幕和屏幕（最小宽度：1200px）{
div{
字体大小：36px；
}
}
你好
另一种方法是缓慢增加字体大小，这不会限制最大字体大小，但即使在非常宽的屏幕上，它看起来也会更好。并没有以完美的方式回答问题，但它的第一行

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

更新：CSS得到了改进，我建议使用
clamp（最小、首选、最大）
功能：

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

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

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

更新：CSS得到了改进，我建议使用
clamp（最小、首选、最大）
功能：

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

还有一个想法。calc函数使用双精度浮点。因此，它在1e18附近呈现阶跃函数。比如说,

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

这将捕捉到值0px、1024px、2048px等。请参阅pen

阶跃函数可以通过一些巧妙的数学运算来创建abs值和最小/最大值。比如说

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

当z时，给定的步长（z）为零，这是另一个想法。calc函数使用双精度浮点。因此，它在1e18附近呈现阶跃函数。比如说,

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

这将捕捉到值0px、1024px、2048px等。请参阅pen

阶跃函数可以通过一些巧妙的数学运算来创建abs值和最小/最大值。比如说

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

当z@Danield谢谢你的回答。我从中学到了很多。我想知道为什么您需要添加额外的
@media
查询
max-
和
min width
。仅仅使用fuild类型的mixin还不够吗？@mesqueeb你完全正确。这些媒体查询是不必要的，因为它们是在SASS mixin中处理的。我已经更新了帖子和相关的代码笔。谢谢我经常使用polyfluid上浆器，它非常适合一次缩放多个对象，并且可以控制所有对象。老实说，它的工作原理令人难以置信。@AlexMcCabe polyfluid上浆一号看起来很棒，谢谢！钳形属性看起来不允许所有的调整（线性插值意味着2个参数）。@Danield感谢这个伟大的答案。我从中学到了很多。我想知道为什么您需要添加额外的
@media
查询
max-
和
min width
。仅仅使用fuild类型的mixin还不够吗？@mesqueeb你完全正确。这些媒体查询是不必要的，因为它们是在SASS mixin中处理的。我已经更新了帖子和相关的代码笔。谢谢我经常使用polyfluid上浆器，它非常适合一次缩放多个对象，并且可以控制所有对象。老实说，它的工作原理令人难以置信。@AlexMcCabe polyfluid上浆一号看起来很棒，谢谢！钳制属性看起来不允许所有调整（线性插值意味着2个参数）。这与问题无关（尽管行为有趣），这与问题有关
font size:max（3vw，36px）
正是被问到的问题，这展示了如何让
max（x，y）
成为一个聪明的数学问题，甚至不使用媒体查询，这是问题中的第二个（隐式）点。有趣。这似乎适用于Chrome和Safari，但不适用于Firefox，或者至少不适用于FF的最新版本。看起来像是底层渲染引擎的工件。我猜，如果这在FF中起作用，量子引擎会解决它。我对这个答案投赞成票，因为它非常聪明，但我永远不会在生产中使用它，因为它非常模糊。而且，正如之前的评论所指出的，事实上并不可靠。。。我喜欢这个。不知道它是如何工作的，但尽管如此。这与问题无关（尽管是有趣的行为），这与问题有关
font size:max（3vw，36px）
正是被问到的问题，这展示了如何让
max（x，y）
成为一个聪明的数学问题，甚至不使用媒体查询，这是问题中的第二个（隐式）点。有趣。这似乎适用于Chrome和Safari，但不适用于Firefox，或者至少不适用于FF的最新版本。看起来像是底层渲染引擎的工件。我猜如果这在FF中起作用，量子引擎会修复它。我在投票