手机端页面自适应解决方案-rem布局

转  https://www.cnblogs.com/szatpig/p/5580599.html

rem布局

布局前插入原生js即可

 (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

还有弹性布局flex、百分比布局

百分比布局：

html {
    font-size: 62.5%; /* 10÷16=62.5% */
}
@media only screen and (min- 481px){
    html {
        font-size: 94%!important; /* 15.04÷16=94% */
    }
}
@media only screen and (min- 561px){
    html {
        font-size: 109%!important; /* 17.44÷16=109% */
    }

}
@media only screen and (min- 641px){
    html {
        font-size: 125%!important; /* 20÷16=125% */
    }
}

 rem布局bug-页面短暂闪烁或界面由小变大：

将body设置属性 style="visibility:hidden",待页面加载完后，设置属性 visibility:visible

2、手淘flexible页面适配

1	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

flexible是一个制作H5适配的开源库，需要在html中引入，可以直接使用阿里CDN：

1	<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

 

CSS处理器(SASS)

1 2 3

@function px2rem($px, $base-font-size: 75px) {     @return ($px / $base-font-size) * 1rem; }

参数$base-font-size: 75px，可以通过(psd文件的宽度/10)来计算。假如psd宽750，则$base-font-size为75px

1 2 3 4 5

//比如量取box宽为190，高为190，则代码： .box {    width: px2rem(190px);    height: px2rem(190px); }