​

 前言

想必大家都有接触到已经开发完整移动端项目突然来需求要增加用户自己设置字体大小的功能，数据太多，做为一个资深的程序员，肯定不能一个个去修改，所以就有了postcss-px-to-viewport插件，这个插件可以主动帮大家把指定属性的指定单位更换成你想要的单位。
比如，直接将font-size的rpx单位改成rem单位且可以自动等比例缩放

效果

当然你的移动端页面也会跟随更改~~~~

思路

1.使用插件postcss-px-to-viewport将rpx转换成rem

2.把根节点font-size写入全局vuex中

3.增加设置大小页面，确定后写入本地缓存

4.项目启动时，读取本地缓存放入vuex中

5.需要的页面顶层加入

<page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta>

代码实现

一、引入插件

	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转rem，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置，可以将rpx转换为rem，如果要调整比例，可以调整 viewportWidth 来实现
    'postcss-px-to-viewport': {
      unitToConvert: 'rpx', // 需要转换的单位。我这里是rpx，如果你的项目都是用的rpx，就改成rpx
      viewportWidth: 1800,// 密度，一般为750 || 375。这里可以自己修改
      unitPrecision: 5,
      propList: ['font-size'], //要转换的属性，*号代表所有rpx的属性
	  viewportUnit: "rem", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'rem', // 字体需要转成的单位，只针对 font-size 属性
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false
    },
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  }
}

 三、在Vuex的state中定义全局变量，并且mutations中注册方法

vuex_fontsize: 9,	//数值根据自己项目调整

upFontsize(state,val){
			state.vuex_fontsize = val
		},

四、用户字体设置页面

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="content">
		<view>
			<view class="fontchange">显示文字大小</view>
		</view>
		<view style="width:100%;padding: 0 20rpx;">
			<slider
				:min="7"
				:max="11"
				:value="fontValue"
				@change="sliderChange"
				:step="2"
			/>
			<view class="change-fontsize-box">
				<text style="font-size: 24rpx;">
					小
				</text>
				<text style="font-size: 32rpx;">
					标准
				</text>
				<text style="font-size: 39rpx;">
					大
				</text>
			</view>
		</view>
		<view style="padding: 40rpx 20rpx;width: 100%;">
			<u-button type="primary" @click="submit">确定</u-button>
		</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			fontValue: 9,
		};
	},
	onShow() {
		this.fontValue = this.vuex_fontsize;
		console.log(this.vuex_fontsize);
	},
	methods: {
		sliderChange(e) {
			this.fontValue = e.detail.value;
		},
		submit() {
			this.$store.commit('upFontsize', this.fontValue);
			uni.setStorageSync("fontSize", this.vuex_fontsize);
			console.log(this.vuex_fontsize);
			uni.showToast({
				title: '设置成功',
				icon:'none',
				duration: 1500
			});
		},
	},
};
</script>
 
<style>
.fontchange {
	font-size: 32rpx;
	margin: 40rpx 0;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10rpx;
	box-sizing: border-box;
}
.change-fontsize-box{
	margin: 20rpx 36rpx;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
</style>

五、应用启动时读取本地缓存写入Vuex中，APP.vue的onLaunch中

//读取Storage里的字体大小
			let fontsize = uni.getStorageSync("fontSize")
			if (fontsize) {
				console.log(fontsize);
				this.$store.commit('upFontsize',  fontsize);
			}

六、其他页面引用

这里在H5中只需要给主页添加即可全部更改.

如果真机测试在移动端需要每个页面都要添加哦~

这行代码的主要目的是设置页面的根节点html的font-size属性

<template>
    <page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'">    </page-meta>
    <view>
        ·······
    </view>
</template>

现在可以看到根节点已经变成设置的11px

里面的font-size也变成了rem单位

结束

里面还有一些参数大家可以看一下官网的参数详情，有不清楚的可以评论留言，回复超快哦官网连接 

​