手机REM使用代码

最新推荐文章于 2023-05-15 15:00:24 发布

sean_it

最新推荐文章于 2023-05-15 15:00:24 发布

阅读量294

点赞数

分类专栏：技术博客

本文链接：https://blog.csdn.net/zgp18963349823/article/details/78679378

版权

技术博客专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在手机端使用rem单位时，需要根据不同的屏幕大小来设置html 字体大小，通过以下代码来实现

(function (){
    var _self = this;
    _self.width = 720;//设置默认最大宽度
    _self.fontSize = 100;//默认字体大小
    _self.widthProportion = function(){
        var p = (document.body&&document.body.clientWidth||
                document.getElementsByTagName("html")[0].offsetWidth)/_self.width;
        return p>1?1:p<0.3?0.3:p;
    };
    _self.changePage = function(){
       document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
    }
    _self.changePage();
    window.addEventListener("resize",function(){_self.changePage();},false);
})();