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);

 

 

还有、百分比布局

 

百分比布局：

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

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

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

 

 

2、手淘flexible页面适配

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

 

CSS处理器(SASS)

@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

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