vue和vue3配置rem解决移动端适配

1. 在项目public文件夹下，新建一个rem.js文件
   
2.  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 = (clientWidth / 7.5) + 'px'
     }
   
     if (!doc.addEventListener) return
     win.addEventListener(resizeEvt, recalc, false)
     doc.addEventListener('DOMContentLoaded', recalc, false)
   })(document, window)

3. main.js引入rem.js

   // rem单位   1rem=100px
   import './../public/rem.js'

4. vue文件的css使用，转换公式1px/100，例如：1px=0.01rem，30px=0.3rem

   .content-box {
     width: 1rem;  
     height: 1rem;
     line-height: 1rem;
     text-align: center;
     font-size: 0.3rem;
     font-family: PingFangSC-Regular;
     background: #fff;
     border: 0.01rem solid red;
   }