responsive-design - 根据窗口宽度响应字体大小，CSS 有可能吗？

Question

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

Answer 1

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

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

类似于:

p {

  font-size: 2vmax;

}

另请注意:有一个 bug in Chrome 20+/Safara 6+这会阻止字体根据新的视口(viewport)大小自行调整大小。

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

• SlabText
• FitText