Html 移动设备的 CSS 字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16041541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS font size for mobile
提问by Ben Packard
I have simple pages completed that seem to respond well to different size screens. I haven't done anything fancy to achieve this - just avoided fixed sizes etc.
我完成了一些简单的页面，这些页面似乎对不同尺寸的屏幕反应良好。我没有做任何花哨的事情来实现这一点 - 只是避免了固定尺寸等。
One page, however, has a large single word in a large font:
然而，一页有一个大字体的大单词：
When I resize the browser, all other content lays out correctly, but the title word of course won't break:
当我调整浏览器大小时，所有其他内容都会正确布局，但标题词当然不会中断：
What is the correct way to handle this? Is there some way to adjust the font size based on the screen width?
处理这个问题的正确方法是什么？有没有办法根据屏幕宽度调整字体大小？
回答by thgaskell
Another option is to use viewport-percentage lengths.
另一种选择是使用视口百分比长度。
vw unit:Equal to 1% of the width of the initial containing block.
vw 单位：等于初始包含块宽度的 1%。
You can read more about it on CSS Trickswhich discusses a repaint bug for certain browsers, but you can fix it with a little jQuery.
你可以在CSS Tricks上阅读更多关于它的信息，它讨论了某些浏览器的重绘错误，但你可以用一点 jQuery 修复它。
CSS
CSS
h1 {
font-size: 25vw;
}
回答by Niels
You can use media queries like:
您可以使用媒体查询，例如：
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}
Some more info can be found here: http://css-tricks.com/css-media-queries/
更多信息可以在这里找到：http: //css-tricks.com/css-media-queries/
回答by Ivo Pereira
Have you tried FitText?
你试过FitText吗？
It is a jQuery plugin made for that occasions. Quoting their description:
它是为那个场合制作的 jQuery 插件。引用他们的描述：
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
FitText 使字体大小灵活。在您的流畅或响应式布局上使用此插件来实现填充父元素宽度的可扩展标题。
