vue 3屏幕自适应

Vue 3屏幕自适应可以通过使用rem单位来实现。rem单位是相对于根元素的字体大小而言的，因此可以根据根元素的字体大小来进行自适应。下面是实现Vue 3屏幕自适应的步骤：

1. 在public文件夹下创建一个rem.js文件，用于设置根元素的字体大小。

   (function (doc, win) {
     var docEl = doc.documentElement;
     var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
     var recalc = function () {
       var clientWidth = docEl.clientWidth;
       if (!clientWidth) return;
       docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; // 750为设计稿宽度，可根据实际情况修改
     };
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);
     doc.addEventListener('DOMContentLoaded', recalc, false);
   })(document, window);

2. 在main.js中引入rem.js文件。

   import './rem.js'

3. 在vue.config.js中配置postcss-px2rem插件，将px单位转换为rem单位。

   const px2rem = require('postcss-px2rem')
   const postcss = px2rem({
     remUnit: 100 // 100为根元素的字体大小，可根据实际情况修改
   })
   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           plugins: [
             postcss
           ]
         }
       }
     }
   }

经过以上步骤，就可以实现Vue 3屏幕自适应了。