最近接触了rem布局的使用，在开发一些运营页面的时候经常需要开发一些造型复杂的图文混排页面，在不同分辨率下的自适应很麻烦，最简单的适配方案就是根据屏幕宽度等比缩放页面，rem布局就是这种思路的一种实现方案。
原理： rem布局就是会根据页面的html的font-size 进行重新计算
比如html的font-size是40px
那1rem就是40px ， 0.5rem就是20px
我们只要让页面中的全部元素都使用rem作为单位，再写一个js来控制html的font-size就能实现整个页面按比例缩放了
页面头部加入 script ，这个scrip会根据屏幕大小自动设置html 的font-size到合适的值
<script>!function(d){function e(){var c=a.getBoundingClientRect().width;1===b&&(480<c&&(c=480),a.style.width=c+"px",a.style.margin="0 auto");a.style.fontSize=c/10+"px"}var a=d.document.documentElement,b=d.devicePixelRatio,f,b=2<b?3:1<b?2:1;a.setAttribute("data-dpr",b);d.addEventListener("resize",function(){clearTimeout(f);f=setTimeout(e,200)},!1);e()}(window);</script>
由于使用rem布局之后在开发过程中难免要用到px和rem的换算，我使用了less来解决这个问题
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
@rem: 1rem / @baseFontSize;
.box1{
padding-left:25 * @rem;
padding-right:25 * @rem;
}
缺点：
在开发大型项目的时候难免使用到第三方的ui库，但是这些第三方ui库很可能没有使用rem布局方案，如果页面中的元素混合使用了rem和其他布局方案，在不同屏幕上很难保证效果正常。