自适应处理：
使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果
一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-sizedocEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
给html设置font-size大小，其实就是在DOMContentLoaded或者resize变化后调整font-size的大小，从而调整rem的比值关系。移动端的320宽度为标准去做适配的。
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>rem1</title> <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 = 'onorientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; };//绑定浏览器缩放与加载时间window.addEventListener(resizeEvt, recalc, false);document.addEventListener('DOMContentLoaded', recalc, false);</script></html>注释1：
有的设计稿是要求满屏显示的情况，要重新计算高度的差值，再乘以字体缩放页面。
var oBjHeight = $("body").height(), oBjWindowHeight= $(window).height(); if( oBjHeight > oBjWindowHeight){ docEl.style.fontSize = (20 * (docEl.clientWidth / 320))*(oBjWindowHeight/oBjHeight) + 'px'; }注释2：
布局视口的尺寸：document.documentElement.clientWidth/Height（不包括滚动条）
视觉视口的尺寸：window.innerWidth/Height（包括滚动条）
两者的兼容性都较好
联系客服
