根据窗口宽度响应字体大小，CSS可以吗？答案

【问题标题】：Responsive font size according to window width, is it possible with CSS?根据窗口宽度响应字体大小，CSS可以吗？
【发布时间】：2014-03-17 05:07:58
【问题描述】：

我在 Wordpress 上做了一个响应式设计，并调整了所有内容。整个布局、幻灯片和插件都会根据窗口宽度进行调整，但我无法让字体做出响应。我尝试了许多不同的百分比选项，现在也尝试了 Vw 和 Vh。它确实有效，但视口宽度和高度单位的间隔太大，不幸的是，当窗口调整大小时，变化非常剧烈。我需要一些平滑的方法来减小字体大小，窗口大小几乎没有变化，并且最好将最小宽度设置为某个固定单位。请帮助我，仅使用 CSS 可以吗？

【问题讨论】：

标签： responsive-design viewport font-size

【解决方案1】：

听起来您想对字体大小进行非常精细的控制。

CSS-Tricks 上有一篇很棒的文章概述了您的一些选择。 Chris 建议使用vmin 来控制font-size。经过试验，我建议使用vmax，因为它会选择vw 和vh 的最大值，这有点像你提到的最小字体大小。

类似：

p {

  font-size: 2vmax;

}

另请注意：bug in Chrome 20+/Safara 6+ 可防止字体根据新的视口大小调整自身大小。

不幸的是，如果这不够细粒度，我认为您将不得不使用 js。我建议使用这些优秀的插件之一：

【讨论】：

谢谢你的好建议，我认为你是对的，但我现在实际上正在使用 vmax，当我将窗口大小减小到 1024 或稍大时，文本太小了，我可以几乎没有读过。我必须看看那个，但感谢一个很好的答案。我不关心旧浏览器，只要它适用于新浏览器即可:)
这也取决于包含元素的布局/大小。例如，包含元素的最小宽度/最小高度可能会阻止文本变得太小。或者，您可以将其与 media 查询结合使用，以便在某个断点下方切换为使用像素或其他固定字体大小。
相对于父元素的宽度和高度是否存在百分比之类的东西。例如应该有一个容器字体大小，然后应该有子元素字体大小，为什么没有像最小字体大小或类似的功能。太蠢了！