我正在研究移动第一框架.该项目有广泛的要求,在各个地方都有大量的浏览器和设备可供使用.我的主要目标之一是印度,其浏览器和设备使用趋势与英国或美国的差异很大.
印度浏览器使用 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和操作系统Web浏览器？
我理想地喜欢使用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干净.
谢谢
你的两个样式声明都可以正常工作.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浏览器和不支持的浏览器上使用.
我可以使用...将更好地概述哪些浏览器支持此设备.
至于性能,CSS文件中包含的每个字符等于1个字节.样式表中包含的字节越多,浏览器下载它的时间就越长.因此,当然,在px值旁边添加值rem最终会增加下载时间,但大多数情况下这可以忽略不计.
至于Android设备是否与Chrome捆绑在一起:不,情况并非如此.这完全取决于制造商.