uniapp H5 APP实现全局字体大小调整功能

直接上图，我用的是APP，H5上也可用 实测，使用uniapp开发 font-size所有的单位都是写的rpx，不需要挨着改css

第一步安装postcss-px-to-viewport

	npm install postcss-px-to-viewport --save-dev

第二步

根目录下创建一个 postcss.config.js文件，文件内容如下：

const path = require('path')
module.exports = {
  parser: 'postcss-comment',
  plugins: {
    'postcss-import': {
      resolve(id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    },
    'autoprefixer': {
      overrideBrowserslist: ["Android >= 4", "ios >= 8"],
      remove: process.env.UNI_PLATFORM !== 'h5'
    },
    // 借助postcss-px-to-viewport插件，实现rpx转px，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置，可以将rpx转换为1/2的px，如20rpx=10px，如果要调整比例，可以调整 viewportWidth 来实现
    'postcss-px-to-viewport': {
      unitToConvert: 'rpx', // 需要转换的单位
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ['*'],
      fontViewportUnit: 'rem', // 字体需要转成的单位，只针对 font-size 属性
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false
    },
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  }
}

第三步需要用到的页面 加上page-meta

如果你是跟我一样 设置的全局的文字大小，那每个页面都需要加上page-meta

【注：当前页面修改store理的fontsize后，需要刷新页面才会生效，不需要重启APP】
【注2：字体调节范围最好小点，不然你页面的样式会乱，这个方法只会修改font-size的值，不会修改其他CSS属性】
然后就可以快乐的玩耍了，设置页面去修改store里面的fontsize就可以了，再加个缓存，每次进来读缓存 去设置vuex里的fontsize