pc端自适应设置

第一步,引入vue文件中js代码

<script>
// 单独设置jsrem适配文件
// 根标签文字大小 =  当前设备宽度 / 基数
function setFontSize () {
  // 确定基数
  const i = 80
  // 获取设备
  const htmlClient = document.documentElement
  // 设备宽度
  let htmlWidth = htmlClient.offsetWidth
  // 设备宽度不能无限的大不能无限小 (1024 - 1920)
  if (htmlWidth >= 1920) {
    htmlWidth = 1920
  } else if (htmlWidth <= 1024) {
    htmlWidth = 1024
  }
  // 设置根标签文字大小
  htmlClient.style.fontSize = htmlWidth / i + 'px'
}
// 调用函数
setFontSize()
// 当窗口大小发生改变的时候
window.onresize = function () {
  setFontSize()
}
export default {
  data () {
    return {

    }
  }
}
</script>

第二步,vscode下载插件cssrem,(作用是把px转换为rem)

第三步,对插件进行配置,在setting.json中添加代码

 //UI图尺寸除以80得到24,
    "cssrem.rootFontSize": 24,
    "cssrem.fixedDigits": 3, // 【取三位小数】
    "cssrem.autoRemovePrefixZero": false, //【是否去除0】

第四部,关闭cscode,重启.
检验是否配置成功