rem-自适应兼容

750设计图    px单位 / 100 = rem ;  

使用时候写进header script 标签

/*** 自适应布局*/

initPageScale() || rem();

function initPageScale() {


    var width = document.documentElement.clientWidth;


    var height = document.documentElement.clientHeight;


    //设置一个最小值,防止当浏览器里有top和bottom条时候,缩放比例太小


    if (height < 520) {        //height = 520;    }


    var ratio = 1;


    var clientRatio = height / width;


    var standardRatio = 1325 / 750; //视觉基准


    if (clientRatio < standardRatio) { //扁屏幕要进行缩放处理


        ratio = clientRatio / standardRatio;    }


    document.querySelector('html').style.fontSize = (document.documentElement.clientWidth / 750 * ratio) * 100 + "px";}


function rem() {


    document.querySelector('html').style.fontSize = ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) / 750) * 100 + "px";


}


你可能感兴趣的:(rem-自适应兼容)