Question

我正致力于移动第一框架。该项目有广泛的要求，在各个地方都有大量的浏览器和设备可供使用。我的主要目标之一是印度，其浏览器和设备使用趋势与英国或美国的差异很大。

印度浏览器使用情况 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浏览器和nokia，但每个浏览器都有它们的小怪癖。因此，设备的范围不同

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-fill，比如https://github.com/chuckcarpenter/REM-unit-polyfill，但是有些情况可能没有启用JavaScript，所以这不起作用。

此外，我尝试着重于性能，因此我希望将请求数量保持在最低限度，并尽可能保持css的清洁。

由于

Answer 1

你的两个样式声明都可以正常工作。 CSS以级联方式呈现代码，这意味着如果一个值被声明为另一个，则将使用后者。如果浏览器可以呈现px但无法呈现rem，则只会忽略rem值。如果浏览器可以同时呈现px和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的浏览器和不支持px的浏览器。

Can I Use...可让您更好地了解哪些浏览器支持此单元。

至于性能，CSS文件中包含的每个字符等于1个字节。样式表中包含的字节越多，浏览器下载它的时间就越长。当然，在rem值旁边添加{{1}}值最终会增加下载时间，但大部分时间都可以忽略不计。

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

Answer 2

任何样式声明都适合您 - 如果浏览器不支持rem，它将回退到像素值。

这是我将html font-size设置为62.5％以将基本字体大小降低到10px的情况之一。这使得计算非常简单，并且很容易在类型声明中发现错误。

html {
  font-size: 62.5%;
}
body {
  font-size: 14px;
  font-size: 1.4rem;
}

使用带有像素回退的rems

2 个答案: