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

一、在项目public文件夹下，新建一个rem.js文件

二、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)

三、main.js引入rem.js

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

四、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;
}