根据窗口宽度响应字体大小,是否可以使用CSS?

时间:2014-02-17 18:48:55

标签: responsive-design viewport font-size

我在Wordpress上做了一个响应式设计并调整了一切。整个布局和幻灯片和插件调整到窗口宽度,但我无法使字体响应。我已经尝试了许多不同的百分比选项,现在还有 Vw Vh 。它确实有效,但视口宽度和高度单位间隔太大,不幸的是,当窗口调整大小时,变化非常显着。我需要一些平滑的方法来减小字体大小,窗口大小几乎没有变化,最好还要将最小宽度设置为某个固定单位。请帮助我,只用CSS吗?

1 个答案:

答案 0 :(得分:5)

听起来你想对字体大小有很好的控制。

CSS-Tricks上有一篇很棒的文章概述了你的一些选择。 Chris建议使用vmin来控制font-size。在进行实验后,我建议您使用vmax,因为它会选择vwvh的最大值,这有助于您提到的最小字体大小。

类似的东西:

p {

  font-size: 2vmax;

}

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

如果这不够精细,不幸的是我认为你将不得不使用js。我建议使用其中一个好的插件: