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自适应代码实现：

效果如下：

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