rem-自适应兼容

2018-03-22  本文已影响0人  银角大王__

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

}

上一篇下一篇

猜你喜欢

热点阅读