如何做rem布局

rem布局自适应效果很好，可以让手机端pc端实现响应式布局，总结如下：

首先我们看看rem是什么？

rem和em单位一样，都是一个相对单位。

区别在于：em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。

由此可见：rem不仅避免了复杂的层级关系，并且实现了类似于em单位的功能。

默认情况下浏览器给的字体大小是16px，因此按照转化关系 16px = 1rem。

em 或 rem 单位进行相对布局的时候，会比% 百分比的方式会更加灵活，而且可以支持浏览器的字体大小调整和缩放等的正常显示。 又因为em是相对于元素的父元素的font-size进行计算，所以开发中建议采用rem布局单位。 

那么rem的自适应是如何处理呢？

        在使用rem布局的时候,为了兼容不同的分辨率,我们应该动态的改变根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果。

实现过程：

通常在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改html的font-size。

var docEl=document.documentElement;

docEl.style.fontSize=20*(docEl.clientWidth/320)+'px';

给html设置fontSize大小，其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小，从而调整rem的比值关系。

总结：

根据实际情况通过设计稿与当前可视区的大小做一个比例关系，通过这个比例进行缩放处理

rem自适应代码实现：

<script type="text/javascript">

var docEl=document.documentElement;

    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，

    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。

    //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值

    

    resizeEvt='orientationonchange' in window?'orientationonchange':'resize',

    recalc=function(){

    docEl.style.fontSize=20*(docEl.clientWidth/320)+'px';

    };

    //绑定浏览器缩放与加载时间

    window.addEventListener(resizeEvt,recalc,false);

    document.addEventListener('DOMContentLoaded',recalc,false);

</script>

效果如下：

第一个效果图是全屏显示状态，第二个效果图是我将浏览器窗口缩小后（很明显，字体自动缩小了），第三个是手机端。

tips:流式布局( 宽度使用% 百分比定义，高度大都是用px来固定住)