响应式布局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