移动端rem.js的使用方法

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

代码一:

window.onload = function(){
    /*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(720,100)
};

window.onresize = function(){
    getRem(720,100)
};

function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

代码二: 小米官网的写法

!function(n){

    var  e=n.document,

        t=e.documentElement,

        i=720,

        d=i/100,

        o="orientationchange"in n?"orientationchange":"resize",

        a=function(){

            var n=t.clientWidth||320;n>720&&(n=720);

            t.style.fontSize=n/d+"px"

        };

        e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))

}(window);

代码三:自适应代码

    (function (win) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var tid;
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            if (width > 750) { // 最大宽度
                width = 750;
            }
            var rem = width / 3.75;
            docEl.style.fontSize = rem + 'px';
        }
        win.addEventListener('resize', function () {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function (e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        refreshRem();
    })(window);
function htmlSize(){
    var oHtml = document.documentElement;
    var aWidth = oHtml.getBoundingClientRect().width;
    if(aWidth < 750){
        oHtml.style.fontSize = aWidth / 15 + "px";
    }else{
        oHtml.style.fontSize = 750 / 15 + "px";
    }   
}
(function(){
    htmlSize();
})();
window.onresize = function(){
    htmlSize();
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 雯雯读书打卡第三十五天,《三国演义》。第36回:关公败走麦城。某夜,马良、伊藉来报荆州已失,廖化又报刘封不援之事。...
    五一班姜雯雯阅读 60评论 0 0
  • 截止正月十五下午六点四十二分,我轻轻合上了中文版的《傲慢与偏见》。同时,我那带着愤怒更多的是遗憾的手指关闭了优酷播...
    丑鬼儿砸阅读 1,331评论 9 12
  • 《军争篇》主要讲了行军的基本原理和如何管理团队士气。 金句: 孙子曰:“故迂其途,而诱之以利,后人发,先人至, 此...
    周赛明阅读 505评论 0 0
  • 【注】图片来自网络 一杯苦酒,喝下夜长 路,就在脚下 却很迷茫,很彷徨 在这喧闹的世界里 苦苦地,寻觅着方向 多少...
    向春光原创文学阅读 225评论 8 7