西门的后花园

一个热爱网络的年轻人的博客

简单介绍移动端CSS3单位rem的用法和bug的解决办法

PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧。目前大部份设备,包括但不限于iOS 5+、Android 2.3+、Window Phone 8+都是可以兼容的,具体兼容表请看caniuse

rem是什么意思呢?CSS手册上的说明:相对长度单位,相对于根元素(即html元素)font-size计算值的倍数。

rem用法很简单,就是根标签html设置文字大小后(不设置的话,大部份浏览器默认为16px),其他标签设置rem都是html大小的倍数。

html{
    font-size: 10px; /* 设置html为10px */
}
h1{
    font-size: 2rem; /* 10px*2=20px */
}

那为什么移动端要使用em作为单位?一是我开始提到的,移动端大部份都支持,不需要考虑兼容问题;二是修改起来灵活。如果你要整个网页字体都变大两倍,直接修改html{font-size:20px}即可。当然还有人提到适合网页缩放,我从未用过这个功能。。。

你肯定会说,百度Google搜出来的文章,大部份是让设置为html{font-size:62.5%}。他的作用也是把html设置成10px,但万一哪个浏览器2b升级成默认文字大小不是16px怎么办?而且可以直接设置成10px,为什么要去用62.5%算成10px?这不是脱裤子放屁吗?所以我都是直接设置10px。

如果只介绍这点东西,网上一搜一大堆,我也就不会写这篇文章了。关键是大规模使用中遇到bug了,而且是蛋疼的原生Chrome。。。iOS平台的Chrome没问题,据说iOS里的所有浏览器都是壳。。。

Android设备Chrome里rem的bug

手机扫一扫

bug 1:例如reset里并没有设置网站文字字号,所以我会在body里直接写font-size:1.2rem,让整个网页字号为12px。但在Android的Chrome里无效,还是按照16px来计算而不是我手动设置10px计算。所以要想给整个网页设置默认字号,最粗暴的办法就是直接在body里设置em或者px字号,例如body{font-size:1.2em}或者12px,推荐em。body直接继承html的字号,可以间接实现rem的功能。然后其他地方用rem是没问题的。

bug 2:因为Chrome设置了最小字号为12px,导致如果在宽高、行高、边距等地方用rem,虽然在html那设置了10px,但默认还是会按照12px来计算,所以实际会偏大。建议rem只是在字号上用比较好。

评论列表

  1. ➡ 广告挡住了……

  2. 广告挡住了内容

  3. 还是用em吧,rem现在pc端的浏览器还有不支持的。

  4. 这广告的位置挡的秒啊 🙁

  5. 你挂的主机广告都挡住内容日记了,这样真的好吗?

  6. 目测浮动的问题。

  7. 其实没有挡住

  8. 我在你这评论,总是会把下面的“西门的后花园”当成提交按钮 🙁

  9. 教程说的非常详细,谢谢楼主分享了。

  10. 这广告。。。

  11. 😮 广告挡住了代码,没法学了….

  12. 突然想起来再跑来说说
    px与em是成比例的
    px一般只能整数,但em可以精确到小数点之后3、4位

  13. 呵呵,长点见识了。

  14. 你这广告太牛B了。

  15. ➡ 主机格调,真的那么好吗。

  16. 学习了!咱还是很少有机会做移动端的……
    PS:说挡住的真是无力吐槽

  17. 😮 都开始搞移动端了呀??

  18. 嗯,移动端得看看。

  19. rem很方便也很麻烦……所以有时要求不高就还是直接px算了

  20. 第一次感受到rem这个神奇单位,学习啦。。 😈

  21. 教程说的非常详细,谢谢楼主分享了

  22. zhongfufen

    服了 广告挡住了就不会F12 display:none么 一群人在那叫半天 自己手指一动就解决了啊

  23. Panda

    Chrome默认最小字号为11px

  24. 把html的font-size设置成100px。 就可以方便的把rem用到任意宽度高度字体上了。

    另外,如果设计稿是640宽的,可以用js动态的设置 $(window).width()/6.4 px 为 html的font-size。这样在设计稿上面量出来多少个单位,css里面直接除以100就可以了。 还有个好处是不管怎么放大缩小网页,都是长设计稿的样子。

发表评论

分类目录