css rem 的理解

 

今天有空整理下自己对rem的理解。

em是相对于父亲元素变化的，rem就是相对于root根元素变化的咯。在如今的移动端html开发，要自适应各种手机的各种尺寸的浏览器，

rem还是不错的选择，目前淘宝触屏版和飞牛网的触屏版(m.feiniu.com)都是采用这种方式来自适应各种尺寸的浏览器。

rem的相关文章可以参考这些：

1：web app变革之rem   https://isux.tencent.com/web-app-rem.html

2：使用rem设置文字大小  http://www.520ued.com/article/53e98deabb16a74c41b5de76

 

 重点在这里：

rem与px之间的换算，其实就是看根元素html的font-size属性，几乎所有的浏览器html默认的font-size大小为16px，这个时候，我们就

简单粗暴的认为1rem == 16px，所以12px的间距就可以写成 12/16rem,也就是0.75rem。为了换算简单，你可以把html的font-size设置为

10px或者100px，飞牛网就是设置100px,我们就用1rem等于100px来换算。

 

在使用rem的时候，也遇到一些坑，比如之前在做头部组件时，图标用的雪碧图，结果在1+手机的浏览器中图片定位有问题，如下图所示：

在网上看完大神的一篇文章：完美解决移动端使用 rem 单位时 CSS Sprites 错位问题  http://www.tuicool.com/articles/yumEzi

 这边文章中有两个公司教我们定位图片位置怎么从rem转换成百分比，使用百分比后的图片如下所示：、

 

 谢谢大家，写的不好，还请多多指正。

转载于:https://www.cnblogs.com/jayanzhou/p/6374455.html