Css 字体大小：calc（）使字体响应-这是个好主意吗？

我最近偶然发现了一些使用calc（）使字体大小更具响应性的技巧。它非常简单，而且据我所知，它得到了浏览器的良好支持（IE需要一如既往的爱）

正文{
背景色：#434343；
颜色：#eee；
字体系列：“Roboto Slab”；
}
.集装箱{
填充物：4vw；
}
h1{
字体大小：calc（24px+3vw）；
}
氢{
字体大小：calc（20px+3vw）；
}
h3{
字体大小：calc（16px+2vw）；
}
p{
字体系列：Roboto；
字体大小：calc（12px+1vw）；
}
p、 锤子{
字体大小：calc（12px+1.5vw）；
}

这是我的头球
这是我的副标题
这是我的分区标题
这是我的介绍hammer。喔
这只是一个普通的段落。Calc（）很有趣，通过结合px和vw，我们可以获得整洁的响应字体大小，而不需要太多的媒体查询

（打开一支新钢笔）

看一看

我在Smashing杂志文章的基础上做了一篇文章，使用CSS自定义属性（CSS变量）轻松控制最小和最大字体大小

像这样：

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

---

这是一项很好的技术。但是，它可以使字体在宽屏幕尺寸下过大。要解决这个问题，可以尝试使用“.1vw”表示视口宽度的1%。您可以这样使用：h1{font size:24px；font size:3vw；}h2{font size:20px；font size:3vw；}h3{font size:16px；font size:2vw；}或@torazaburo共享一个好的idea@AmranurRahman好吧，那不是OP想要的，而且它会导致在狭窄的屏幕上出现过小的字体。@AmranurRahman我认为这种方法会使字体大小的变化过于极端。16px+2vw似乎允许更均匀的flow@torazaburo读起来很有趣。谢谢