领取免费IT资料 加群:272292492
rem是什么
rem(font size of the root element)是指相对于根元素的字体大小的单位。
1rem等于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位时,设置成相应的百分比即可。
为什么需要rem
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新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只有IE6-8无法兼容。
如何兼容?
为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,IE6~IE8将自动忽略它们所无法识别的rem单位:
rem使用(适配)
rem换算适配代码↓(设计稿宽度:640,字体值:20)
使用rem需要注意的地方
1.通常在标题,正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景,rem 可能会导致布局错位,比如这样一个回顶部的按钮:
![](https://i-blog.csdnimg.cn/blog_migrate/3f8b6298dc047af8d1c248d981155821.png)
2.Chrome及后来加入Webkit阵营的Opera都不支持页面字号小于12px,如果希望你的程序足够安全,尽量不要定义小于12px的字号。
比如这样的:
因为部分浏览器会将小于 12px 的字变成 12px 来显示。那么此时,在这些浏览器下,如果我做了这样的定义:
你预期得到10px ✖️ 10rem = 100px,但实际上因为10px小于12px,会默认使用12px来替换10px。所以变成了12px ✖️10rem = 120px。这是非常大的错误,我们应当尽量避免。
3.chrome中body使用rem失效
问题:在 Chrome 和 Opera 上,如果我们给 body 元素应用了 rem,取值将会计算错误。
代码如下:
我们预期 body的 font-size 为 14px,然而实际情况与我们想象的不太一样,最终 body 的计算值并不是 14px,它忽略了 html 的定义,而是直接使用了浏览器的默认字号作为参照。于是最终计算值为:16px ✖️ 1.4rem = 22.4px。测至 chrome 45.0 和Opera 33.0 仍然存在这个问题,不过 chrome 49.0 和 Opera 37.0 看起来已经被修复了。
为了有效的绕过这个问题,并且实现相同的效果,我们可以将代码修改如下:
由于 body 是 html 的直接子元素,所以此时对 body 使用 em 与 rem 的效果是相同的。em是参照父元素进行换算的。
4.不要对html设置百分比字号
虽然大部分浏览器的默认字号是 16px,但仍然有使用其它默认值的浏览器,比如我依稀记得 firefox 使用了15px。而且最重要的是,用户是可以改变浏览器默认字号的,所以你认为的可能并不是你认为的。
批量转换rem的工具
已经在工程中大量使用px单位想转成rem单位,可以用这个工具:
nodeJs脚本工具
为了方便更对px更有感觉的前端人员,在写代码时,将px单位自动转为rem单位的插件:
sublime插件
在线批量转css文件:
http://www.520ued.com/tools/rem
在线转css代码:
http://alurk.com/
更多文章:www.f-z.cn