html - 移动设备的 CSS 字体大小

Question

我完成了一些简单的页面，这些页面似乎对不同尺寸的屏幕 react 良好。我没有做任何花哨的事情来实现这一点——只是避免了固定尺寸等。

然而，有一个页面有一个大字体的大单词:

当我调整浏览器大小时，所有其他内容都正确布局，但标题词当然不会中断:

处理这个问题的正确方法是什么？有什么方法可以根据屏幕宽度调整字体大小吗？

Answer 1

另一种选择是使用 viewport-percentage lengths .

vw unit: Equal to 1% of the width of the initial containing block.

您可以在 CSS Tricks 上阅读更多相关信息其中讨论了某些浏览器的重绘错误，但您可以使用一点 jQuery 来修复它。

http://jsfiddle.net/7L9QH/

CSS

h1 {
    font-size: 25vw;
}