rem是什么？
rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。 默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem
自适应处理：
使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果
<style type="text/css">
section { width: 100%; height: 100%; background: red; } .page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } </style></head><body>
<section> <div class="page">rem跟着html:font-size变化</div> </section></body><script type="text/javascript">var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = 30 * (docEl.clientWidth / 320) + 'px'; };//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);document.addEventListener('DOMContentLoaded', recalc, false);</script>