CSS相对屏幕宽度,如何在CSS3中创建相对于屏幕宽度的真正响应式排版

但是，这仍然没有得到广泛支持 . 我发现的最好的方法是将每个分辨率的字体调整应用于html选择器(下面的示例) . 您只在移动视图中声明基本字体大小，并使用“rem”值(相对于根选择器)逐步增强 .

值得注意的是，IE 8，Opera Mini和iOS Safari 3.2并没有在简写"font"属性中支持它 . 所以这取决于您的浏览器支持需求 . 使用px值作为回退会破坏相对单位的目的，所以......除非你指定px单位作为回退，然后你应该使用modernizr来检查vw / vh / vmax / vmin支持 .

替代方法：

我是'd also look into the Zurb Foundation 5'的前端框架，因为他们使用了一个相当有趣的方法，使用元标记来响应地调整字体大小 . http://foundation.zurb.com/docs/components/global.html

有像flowtype.js这样的js库以及其他几个库，只需环顾四周(自2013年8月以来有很多新东西)

:root { font-size:68.75% }

body{ font-size:1rem; /*IE9 & 10*/

line-height:1.625; /*IE9 & 10*/

font:1rem/1.625 sans-serif }

h1{ font-size:2.9375rem }

h2{ font-size:1.8125rem }

h3{ font-size:1.4375rem }

@media (min-width:30rem){ :root{ font-size:81.25% } }

@media (min-width:37.5em){ :root{ font-size:93.75% } }

@media (min-width:50em){ :root{ font-size:112.5% } }

@media (min-width:62.4375em){ :root{ font-size:118.75% } }

/* etc. */