码迷,mamicode.com
首页 > 其他好文 > 详细

前端rem单位的使用研究

时间:2016-12-17 11:48:19      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:移动   数学   设置   多少   16px   移动端   body   研究   css3   

分析网易新闻手机web端,http://3g.163.com/,发现里面大量使用了rem这个单位进行计算大小。

针对rem这个单位有如下解析:

px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。

em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。

rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视。

参考:http://www.uizph.com/post-329.html?utm_source=tuicool&utm_medium=referral

前端rem单位的使用研究

标签:移动   数学   设置   多少   16px   移动端   body   研究   css3   

原文地址:http://www.cnblogs.com/EasonJim/p/6189265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!