根據(jù)移動(dòng)端配置，先安裝

安裝

// npm
npm install postcss-pxtorem --save-dev

// yarn
yarn add postcss-pxtorem --save-dev

配置postcss.config.js

在項(xiàng)目根目錄創(chuàng)建文件postcss.config.js ；
按需輸入以下內(nèi)容：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*'], // Convert all properties
      unitPrecision: 6, // Decimal places for rem values
      selectorBlackList: ['.van'], // Exclude .van-* classes
      replace: true,
      mediaQuery: false, // Don't convert media queries
      minPixelValue: 2 // Minimum pixel value to convert
    }
  }
}

新建文件 utils/platform.js

const navigator = window.navigator
export default {
  isIphone() {
    const userAgent = navigator.userAgent.toLowerCase()
    return /\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(userAgent)
  },
  isIphoneXLater() {
    return this.isIphone() && window.screen.height >= 812
  },
  isAndroid() {
    const userAgent = navigator.userAgent.toLowerCase()
    return /android|adr/gi.test(userAgent)
  },
  isApp() {
    const userAgent = navigator.userAgent.toLowerCase()
    return userAgent.includes('@xxxxx')
  },
  // 模擬器平臺(tái)
  isSimulatorApp() {
    const platform = navigator.platform.toLowerCase()
    return !((this.isIphone() && platform.includes('iphone')) || (this.isAndroid() && platform.includes('linux')) || this.isHarmonyOs())
  },
  // 微信平臺(tái)
  isWechat() {
    const userAgent = navigator.userAgent.toLowerCase()
    return userAgent.includes('micromessenger') && !userAgent.includes('wxwork')
  },
  isHarmonyOs: function() {
    var tmp = navigator.userAgent.toLowerCase();
    var harmonyos = tmp.indexOf('dcfundharmonyos') > -1;
    return !!harmonyos;
  },
  isHideHeaderWebview() {
    const userAgent = navigator.userAgent.toLowerCase()
    return userAgent.includes('@hideheader')
  }
}

新建文件 utils/rem.js

import platform from '@/utils/platform'
  ; (function () {
    // 動(dòng)態(tài)設(shè)置根元素字體大小
    function setRemUnit() {
      // 屏幕寬度（設(shè)備獨(dú)立像素）
      const deviceWidth = document.documentElement.clientWidth || window.innerWidth;
      // 限制最大寬度（避免在平板等大屏設(shè)備上過大）
      const maxWidth = 750;
      const scale = deviceWidth > maxWidth ? maxWidth / deviceWidth : 1;
      // 根元素字體大小 = 屏幕寬度 * scale / 10（與 rootValue 對(duì)應(yīng)）
      document.documentElement.style.fontSize = (deviceWidth * scale) / 10 + 'px';
    }

    // 初始化
    setRemUnit();
    // 監(jiān)聽窗口大小變化（橫豎屏切換、窗口縮放）
    window.addEventListener('resize', setRemUnit);
    window.addEventListener('orientationchange', setRemUnit);
    platform.isIphone() && document.body.addEventListener("focusout", function () {
      setTimeout(function () {
        document.body.scrollIntoView()
      }, 0)
    })
    window.addEventListener('touchend', function (e) {
      var tag = document.activeElement.tagName || "";
      if ((tag !== 'INPUT' && tag !== 'TEXTAREA') || (e && e.target && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA')) {
        document.activeElement.blur()
      }
    })
  })();

然后在main.js引入即可

import './utils/rem.js'