今天有空整理下自己对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转换成百分比,使用百分比后的图片如下所示:、
谢谢大家,写的不好,还请多多指正。