rem错乱，缩放比例后又正常显示（问题记录）

遇到一个比较奇怪的问题，部署至线上出现了样式错乱，缩放比例又正常显示的问题，设置了html头也不行（可能是加的不对），一开始用重置页面比例解决了本机显示，但是电脑win10显示设置缩放布局各有不同，只能又重新找解决方案，下面的计算成功了解决这个问题

创建rem.js

(function (doc, win) {

  let docEl = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function () {

      let clientWidth = docEl.clientWidth

      if (!clientWidth) return

      if (clientWidth === 320) {

        docEl.style.fontSize = 24 * (clientWidth / 320) + 'px'

      } else {

        docEl.style.fontSize = 16 * (clientWidth / 320) + 'px'

      }

    }

  if (!doc.addEventListener) return

  win.addEventListener(resizeEvt, recalc, false)

  doc.addEventListener('DOMContentLoaded', recalc, false)

})(document, window)

main.js引用

import rem from './rem'
Vue.use(rem)

原文🐂🐂🐂