使用带有像素后备的 rems

我正在研究移动优先框架。该项目有广泛的需求，需要满足不同地点的大量浏览器和设备。 我的主要目标地点之一是印度，那里的浏览器和设备使用趋势与英国或美​​国有很大不同。

印度浏览器使用情况http://gs.statcounter.com/#all-browser-IN-monthly-201301-201312-bar

英国浏览器使用情况http://gs.statcounter.com/#all-browser-GB-monthly-201301-201312-bar

我需要针对印度地区的浏览器是 Opera、Android、uc 浏览器和诺基亚，但每个浏览器都有自己的小怪癖。因此，设备的范围有所不同

Opera mini - 不支持 rems Android（chrome之前）v2-v4在rems和ems上都有问题http://www.quirksmode.org/css/units-values/mobile.html

-- 我是否正确地假设更新版本的 Android 预装了 Chrome 和操作系统网络浏览器？

理想情况下，我希望使用 rems，因为它消除了嵌套内容继承其父元素的 em 比例的问题。然而基于研究http://www.quirksmode.org，我需要有一个后退设置。

所以我需要声明一个 px 值。

例如，我可以这样做：

h1 {font-size: 24px; line-height: 30px; margin-bottom: 10px; font-size: 1.846rem; line-height: 2.308rem; margin-bottom: 0.769rem} /* 24px / 30px / 10px */

或者我必须做这样的事情吗？

h1 {font-size: 24px; line-height: 30px; margin-bottom: 10px}
h1 {font-size: 1.846rem; line-height: 2.308rem; margin-bottom: 0.769rem} /* 24px / 30px / 10px */

或者还有其他更好的吗？

我见过一些js的poly-fills，比如https://github.com/chuckcarpenter/REM-unit-polyfill，但可能存在未启用 JavaScript 的情况，因此这不起作用。

此外，我尝试关注性能，因此我希望将请求数量保持在最低限度，并尽可能保持 CSS 干净。

Thanks

您的两个样式声明都可以正常工作。 CSS 以级联方式呈现代码，这意味着如果一个值在另一个值之后声明，则将使用后者。如果浏览器可以渲染px但无法渲染rem, the rem值将被忽略。如果浏览器可以渲染两者px and rem，将使用两者中的后者：

h1 {
    font-size: 12px; /* 1. Font size set to 12px */
    font-size: 1rem; /* 2. Font size set to 1rem, overriding previous value */
}

在这个例子中，rem将在支持该单元的浏览器上使用，并且px将用于那些不这样做的人。

h1 {
    font-size: 1rem; /* 1. Font size set to 1rem */
    font-size: 12px; /* 2. Font size set to 12px, overriding previous value */
}

在这个例子中，px将在支持的两种浏览器上使用rem以及没有的浏览器。

我可以用吗...将使您更好地了解哪些浏览器支持该单元。

至于性能，CSS 文件中包含的每个字符相当于 1 个字节。样式表中包含的字节越多，浏览器下载它所需的时间就越长。所以当然，添加px价值观并肩rem值最终会增加下载时间，但大多数时候这是可以忽略不计的。

至于Android设备是否与Chrome捆绑在一起：不，事实并非如此。这完全取决于制造商。