vue中使用rem做自适应

最新推荐文章于 2023-06-26 16:19:14 发布

乾卦三爻

最新推荐文章于 2023-06-26 16:19:14 发布

阅读量504

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46325225/article/details/127525720

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在src目录下创建config文件夹，在文件夹中创建rem.js文件
在这里插入图片描述


// 设置基准
const BASE = 100;
 
(function (doc, win) {
    let docEl = doc.documentElement,
   // orientationchange->手机屏幕转屏事件
       // resize->页面大小改变事件
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//去windows遍历属性，如果有orientationchange这个属性就用他，没有就用resize
        recall = function () {
            let clientWidth = docEl.clientWidth;//获取到屏幕的宽度
            if (!clientWidth) return;
            docEl.style.fontSize = BASE * (clientWidth / 1920) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recall, false);
 // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
    doc.addEventListener('DOMContentLoaded', recall, false);
})(document, window);