nuxt2移动端适配！！！(处理移动端引入的组件库大小不正常显示)

版本

"postcss-pxtorem": "^5.1.1"
"nuxt": "^2.14.7"

安装

npm i -D postcss-pxtorem@5.1.1

postcss.config.js

排除组件库适配，解决组件库大小在页面不正常显示

const pxToRem = require('postcss-pxtorem')
module.exports = {
  plugins: [
    pxToRem({
      exclude: 'element-ui',
      rootValue: 75,
      propList: ['*'],
      minPixelValue: 2
    })
  ]
}

./plugins/rem.client.js

(function (win, doc) {
  if (!win.addEventListener) return
  function setFont() {
    let screenWidth = document.querySelector('html').offsetWidth
    const baseSize = 75 // 我的设计稿是750px，如果是375px则写37.5
    const pageWidth = 750
    let fontSize = (baseSize * screenWidth) / pageWidth
    document.querySelector('html').style.fontSize = `${fontSize}px`
  }
  setFont()
  setTimeout(() => {
    setFont()
  }, 300)
  doc.addEventListener('DOMContentLoaded', setFont, false)
  win.addEventListener('resize', setFont, false)
  win.addEventListener('load', setFont, false)
})(window, document)

nuxt.config.js

plugins: [
	...
    "@/plugins/rem.client.js"
  ],