响应式布局rem的使用

在现在移动端,响应式布局的时代,用rem做为单位已是很是普及的一门小技巧了..
rem的单位根据html的font-size来进行换算！

1.rem的兼容性：

以下图所示IE9以上就支持了rem这个属性,你说IE6 7 8怎么办,怎么办?让IE去死呗,都H5了还兼容个蛋蛋.手机端就更不用说IE了



2.rem的介绍：

首先在不作任何设置的状况下1rem=16px;由于浏览器默认html的font-size为16px;那么若是用16px去进行换算,咱们在书写css时候将会变得异常吃力...因此咱们须要作的就是找一个换算相对简单的值.

3.rem的换算：

目前来看,不少前端大手子都喜欢上手就给html的font-size:62.5%或者是625%,什么意思?
font-size:62.5%就是16px(默认值)的百分之62.5
62.5%*16px的也就是10px...那么如此一来1rem就为10px,若是是625%,则1rem就为100px.
好比说如今设html的font-size为625%,咱们须要在正常1200px以上的显示器中显示
容器一:宽度为325px,那么咱们给这个容器的css为width:3.25rem;
容器二:宽度为130px,那么咱们给这个容器的css为width:1.3rem;
那这样有什么好处..固然有好处,好比如今咱们改变了设备大小
@media screen and (max-width:1200px){
code.....
}
若是说咱们单位给的是px...咱们须要给这2个容器分别重设px.但实际状况一个页面内至少有100个甚至1000个节点....那么咱们如今有了rem这个属性,
咱们只须要给html从新设置font-size那么一切所有解决..剩下的只须要一些微调！
好比如今显示器1200px时如今咱们想让原来全部的容器宽度只有原来80%;咱们只须要让html的font-size为625%*80%也就是500%..依次类推,这样即便是在小屏幕的手机端,咱们大能够直接去改变font-size达到响应式的效果.

在老牛的博客中,正常状况我给的三大板块(热推,文章,更新)分别为2.2rem,7.8rem,1.94rem,也就是220px,780px以及194px如图;



以后再1220px时候我从新定义了一次font-size





此时3模块的宽度分别为190px,673px,167px~~

在ipad(1024px下)我设置font-size为464%,如图



在iphone6下我把左右2边直接去掉,中间模块为100%显示,如图

---

4.注意事项：
若是是制做pc与mb的响应式 换算请以625%来计算也就是1rem=100px,由于62.5%的换算会有偏差,并且偏差还不小！光作手机端的话问题不大！

原文连接:http://www.web-jackiee.com/a/xiangguanwebwenzhang/2016/0830/156.html