1. 导入插件：npm install postcss-px-to-viewport--save-dev

postcss-px-to-viewport：将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件

2. 在根目录下新建文件：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转rem，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
// 以下配置，可以将rpx转换为rem，如果要调整比例，可以调整 viewportWidth 来实现
“postcss-px-to-viewport”: {
unitToConvert: “px”, // 需要转换的单位，默认px
viewportWidth: 750, // 密度，一般为750 || 375
unitPrecision: 5, // 单位转换后保留的精度
propList: [“font-size”], //要转换的属性，*号代表所有rpx的属性
viewportUnit: “rem”, // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: “rem”, // 字体需要转成的单位，只针对 font-size 属性
selectorBlackList: [], // 需要忽略的CSS选择器
minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: [], // 忽略某些文件夹下的文件或特定文件
include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 ‘src/mobile’ 下的文件 (include: //src/mobile//)
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: “vw”, // 横屏时使用的单位
},
“@dcloudio/vue-cli-plugin-uni/packages/postcss”: {},
},
};

3. 封装全局变量：store.js

• 默认基准字体大小为 50px
• 先封装好“全局缓存变量”函数方法：
  export function setFontScale(fontScale) {
  return uni.setStorageSync($FontScaleKey, fontScale);
  }

import { createStore } from "vuex";import login from "@/store/modules/login";
import schoolService from "@/store/modules/schoolService";
import attendance from "@/store/modules/attendance";
import { setFontScale } from "../common/auth";const store = createStore({state: {// 默认基准字体大小(px)$baseFontSize: 50,//文字缩放倍数$fontScale: 1,},getters: {//获取基准字体大小getBaseFontSize: (state) => {return state.$baseFontSize;},//获得字体缩放倍数getFontScale: (state) => {return state.$fontScale;},//获取缩放字体大小getScaleFontSize: (state) => {return state.$fontScale * $baseFontSize;},},mutations: {SET_FONT_SCALE: (state, scale) => {state.$fontScale = scale;setFontScale(scale);},},modules: {login,schoolService,attendance,},
});export default store;

4. 封装页面组件：settingFontSize.vue

应用技术：Uniapp + Vue3 + Sass

<template><page-meta :root-font-size="`${baseFontSize}px`"></page-meta><view id="font-scale"><view class="text-container" style="font-size:30rpx">拖动滑块以设置字体大小</view><view class="slider-label-container"><view class="label-text label-standard">标准</view><view class="label-text label-medium">中等</view><view class="label-text label-larger">较大</view><view class="label-text label-outsize">特大</view></view><view class="slider-container"><slider min="1.0" max="1.75" :value="data.fontScale" @change="sliderChange" show-value step="0.25" /></view><view class="text-container label-standard">标准字体大小：</view><view class="text-container label-standard">人生就像大海中的一叶扁舟，漂浮不定，当你发现自己逆风而行的时候，不要埋怨上天不公，而要偏转一下你的航向，逆风就会成为顺风。因为生活的起点并不是那么重要，重要的是最后你抵达了哪里。</view><view class="text-container" :style="{ fontSize: `${32 * data.fontScale}rpx` }">预览字体大小：</view><view class="text-container preview-text" :style="{ fontSize: `${32 * data.fontScale}rpx` }">人生就像大海中的一叶扁舟，漂浮不定，当你发现自己逆风而行的时候，不要埋怨上天不公，而要偏转一下你的航向，逆风就会成为顺风。因为生活的起点并不是那么重要，重要的是最后你抵达了哪里。</view><view class="btn-container" @click="onBtnFinishedClicked()"><view class="btn-confirm label-medium" hover-class="btn-press" hover-stay-time="250">完成</view></view></view>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from 'vuex'
import { getFontScale } from '../../common/auth';const { proxy } = getCurrentInstance()
const store = useStore()const data = ref({baseFontSize: 0,fontScale: 1.0,
});const baseFontSize = computed(() => {const scale = getFontScale() || 1.0;return scale * data.value.baseFontSize;
});const sliderChange = (e) => {data.value.fontScale = e.detail.value;
}
const onBtnFinishedClicked = () => {//如果修改了字体大小，则需要重新加载所有页面（因为已经加载的页面字体大小不会修改）proxy.$modal.confirm("确定修改字体大小？").then(res => {if (res) {store.commit('SET_FONT_SCALE', data.value.fontScale);// 使用uni.reLaunch跳转到某个页面，并关闭所有页面proxy.$tab.reLaunch("/pages/mine/personalCenter");}})
}onLoad((options) => {// data.value.fontScale = store.getters.getFontScale;data.value.baseFontSize = store.getters.getBaseFontSize;data.value.fontScale = getFontScale()if (!data.value.fontScale) {data.value.fontScale = 1.0;}
})</script>
<style lang="scss" scoped>
#font-scale {width: 100%;height: 100%;box-sizing: border-box;background-color: $color-background;padding-top: 24rpx;.slider-label-container {display: flex;box-sizing: border-box;align-items: center;padding: 16rpx 32rpx 0;.label-text {display: flex;align-items: center;flex: 1;}}.slider-container {padding: 0 32rpx 24rpx;}.text-container {padding: 12rpx 32rpx;}.btn-container {width: 100%;padding: 24rpx 32rpx 32rpx;box-sizing: border-box;.btn-confirm {width: 100%;height: 0.8rem;display: block;border-radius: 0.2rem;background: #0091ff;color: #fff;font-size: 0.38rem;text-align: center;line-height: 0.8rem;}}.label-standard {font-size: 32rpx;}.label-medium {font-size: 36rpx;}.label-larger {font-size: 40rpx;}.label-outsize {font-size: 45rpx;}
}
</style>

5. 项目入口文件加载：App.vue

<script>
import config from '@/common/config'
import { getFontScale } from './common/auth';
export default {onLaunch: function () {this.initApp()},methods: {// 初始化应用initApp() {// 初始化应用配置this.initConfig()// 初始化全局字体大小this.initFontSize()// 检查用户登录状态this.checkLogin()},initFontSize() {let fontsize = getFontScale() || 1.0console.log(fontsize);if (fontsize) {this.$store.commit('SET_FONT_SCALE', fontsize);}},initConfig() {this.globalData.config = config},checkLogin() {}},
}
</script>

6. 在需要配置的组件页面中添加： < page-meta >

<template><page-meta :root-font-size="`${baseFontSize}px`"></page-meta><view class="wrapper"></view>
</template>