vue开发的PC端项目使用postcss-to-viewport适配移动端

开发PC端项目，突然有一天产品说，手机打开样式错乱了，适配一下

1. 安装依赖

"postcss-px-to-viewport": "^1.1.1",

2. 项目根目录创建并配置postcss.config.js 文件

module.exports = {
   
  plugins: {
   
    autoprefixer: {
   },
    'postcss-px-to-viewport': {
   
      unitToConvert: 'px', // 需要转换的单位，默认为"px"
      viewportWidth: 1920, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 能转化为vw的属性列表
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, //  是否直接更换属性值，而不添加备用属性
      exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 横屏时使用的单位
      landscapeWidth: 1920, // 横屏时使用的视口宽度
    },
  },
}

3. 问题

3.1手机自带浏览器打开没问题，微信浏览器打开，字体不适配

为了提供给用户更好的阅读体验，微信安卓版 7.0.10 版本起，网页的字体会跟随微信设置里的字体大小更改而变化。
若调整字体变大或变小后，部分未适配网页的排版会出现显示错乱，建议未进行适配的开发者尽快完成对“ 字体大小” 的适配
官方通知

3.2 解决

在项目的index.html中增加如下代码：

setFontSizeCallback 接口接受一个参数对象，其中 fontSize 属性用于指定字体大小。你可以根据需要设置不同的值，例如 1 表示小字号，2 表示标准字号，3 表示大字号等。

<script>
      ;(function () {
   
        if (
          typeof WeixinJSBridge == 'object' &&
          typeof window.WeixinJSBridge.invoke == 'function'
        ) {
   
          handleFontSize()
        } else {
   
          if (document.addEventListener) {
   
            document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
          } else if (document.attachEvent) {
   
            document.attachEvent('WeixinJSBridgeReady', handleFontSize)
            document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
          }
        }

        function handleFontSize() {
   
          // 设置网页字体为默认大小
          window.WeixinJSBridge.invoke('setFontSizeCallback', {
    fontSize: 1 })
          // 重写设置网页字体大小的事件
          window.WeixinJSBridge.on('menu:setfont', function () {
   
            window.WeixinJSBridge.invoke('setFontSizeCallback', {
    fontSize: 1 })
          })
        }
      })()
    </script>