根据窗口宽度的响应字体大小，CSS可能吗? [英] Responsive font size according to window width, is it possible with CSS?
问题描述
我已经在Wordpress上进行了响应式设计，并已进行了所有调整.整个布局，幻灯片和插件会根据窗口宽度进行调整，但是我无法使字体响应.我尝试了多种不同的百分比选项，现在还尝试了 Vw 和 Vh .它确实可以工作，但是视口的宽度和高度单位间隔过大，不幸的是，当窗口调整大小时，变化非常明显.我需要一些平滑的方法来减小窗口大小的字体大小，而只需进行很小的更改，并且最好将最小宽度设置为某个固定单位.请帮助我，仅CSS可能吗?
I have made a responsive design on Wordpress and have adjusted everything. The whole layout and slideshows and plugins adjust to the window width, but I can't make the fonts responsive. I have tried many different options with percentages and also now with Vw and Vh. It does work but viewport width and height units have too big intervals and unfortunately when the window resizes the changes are very dramatic. I need some smooth way of reducing font size with the window size with little changes and also preferably minimum width to be set to some fixed unit. Please help me, is it possible with just CSS?
推荐答案
听起来像您希望对字体大小有很好的控制.
Sounds like you want to have pretty fine control over the font sizing.
CSS技巧上有一篇很棒的文章，概述了您的一些选择.克里斯建议使用vmin来控制font-size.经过实验后，我建议使用vmax，因为它将选择vw和vh的最大值，这可以用作您提到的最小字体大小.
There's a great article over on CSS-Tricks that outlines some of your options. Chris recommends using vmin to control the font-size. After experimenting I'd recommend using vmax because it will select the max of vw and vh, which kinda serves as the minimum font-size you mentioned.
类似的东西:
p {
font-size: 2vmax;
}
另外请注意:Chrome 20 +/Safara 6+中存在一个错误. 可以防止字体根据新的视口大小调整大小.
Also note: there's a bug in Chrome 20+/Safara 6+ that prevents the font from resizing itself according to the new viewport size.
不幸的是，如果这还不够细，我认为您将不得不使用js.我建议使用以下优质插件之一:
If this isn't fine-grained enough unfortunately I think you're going to have to use js. I'd recommend going with one of these fine plugins:
- SlabText
- FitText
这篇关于根据窗口宽度的响应字体大小，CSS可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
