实现思路

借助 postcss-px-to-viewport 插件，将项目中的所有 font-size 属性的单位换成 rem，通过控制根字体大小，实现统一字体大小控制。

实现步骤

一、在项目根目录下直接创建 postcss.config.js ，并写入以下代码

postcss-px-to-viewport 配置项参考链接

// 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: 'upx', // 需要转换的单位
      viewportWidth: 200,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'px', // 需要转成的单位，针对所有属性
      fontViewportUnit: 'rem', // 字体需要转成的单位，只针对 font-size 属性
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false
    },
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  }
}

二、 在应用启动页引入以下代码

APP中，根字体大小需要通过 page-meta 来更改，page-meta 配置项参考链接

<template>
	<page-meta root-font-size="1px"></page-meta> 引入这个，可以动态更换这个值，改变根字体大小
	<view>
		content
	</view>
</template>

参考资料

uniapp 关于 rpx 转 px