移动端 rem 适配

 var html = document.getElementsByTagName("html")[0];
    function getFontSize(){
        var width=document.documentElement.clientWidth
            ||document.body.clientWidth+"px";
        var fontSize=(100/750)*width;
        if(width>=750){
            fontSize="100";
        }
        return fontSize;
    }
    html.style.fontSize=getFontSize()+"px";
    window.onresize=function(){
        setTimeout(function(){
            html.style.fontSize=getFontSize()+"px";
        },100)
    };

引用  javascript,javascript 代码
引用成功的话,在浏览器中看页面,调试成开发者模式,发现  html标签会有  style=”font-size: 42.6667px;”  值是多少是js自动判断的,并不固定
写css的时候,就可以按原设计稿除以100  比如  原设计稿的padding-top:653px;   此时可以写成  padding-top:6.53rem;
尽量在火狐中查看页面效果,谷歌小号字体不显示,但是在手机上是咩有问题的

欢迎分享本文,转载请保留出处:前端ABC » 移动端 rem 适配

分享到:更多 ()

发表评论 0