一、自适应rem布局

自适应处理:
使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果
一般情况在项目的最前面加载一段js来修改html的font-size,针对不同分辨率计算font-size,监听浏览器更改 html的font-size
docEl.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(包括滚动条)
两者的兼容性都较好

推荐阅读更多精彩内容