rem使用js适应屏幕的自适应

最新推荐文章于 2023-11-29 12:24:12 发布

GGo！

最新推荐文章于 2023-11-29 12:24:12 发布

阅读量661

点赞数

分类专栏：零散的文件内容文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/ZH445063477/article/details/125135601

版权

零散的文件内容专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1rem=50px

1全局中：

// 使用js实训屏幕的自适应

// import '../src/utils/rem.js'

// // html根元素的字体大小（相对值）=(设备的可是宽度/原图大小)*倍数 750像素  原图的width宽度========rem原理
// function change(){ document.documentElement.style.fontSize=(document.documentElement.clientWidth||document.body.clientWidth)*100 / 750+ 'px'
 
// console.log("1rem="+(document.documentElement.clientWidth||document.body.clientWidth)*100/750+"px" );
// }
// change()
// // // 窗口大小改变事件
// // window.onresize=function(){
    // change()
// // }

2app.vue中（新建的script）

<script>
function change(){ document.documentElement.style.fontSize=(document.documentElement.clientWidth||document.body.clientWidth)*100 / 750+ 'px'
 
console.log("1rem="+(document.documentElement.clientWidth||document.body.clientWidth)*100/750+"px" );
}
change()
</script>

1rem=16px

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;   // 屏幕的宽
                if (!clientWidth) return;  // 如果没找到就返回
                if(clientWidth>750){
                    docEl.style.fontSize = '16px';
                }else{
                   docEl.style.fontSize = 32 * (clientWidth / 750) + 'px';  // 修改html的字体大小
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);


    /*
如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，
否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)

    */