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


}


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容