uniapp 控制全局文字大小（包括组件中的文字）

两种方法：

        在项目根目录创建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插件，实现px转rem，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置，可以将px转换为rem，如果要调整比例，可以调整 viewportWidth 来实现
    'postcss-px-to-viewport': {
    
    
      unitToConvert: 'px', // 需要转换的单位。我这里是px，如果你的项目都是用的rpx，就改成rpx
      viewportWidth: 1800,// 密度，一般为750 || 375。这里可以自己修改
      unitPrecision: 5,
      propList: ['*'],
	  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': {
    
    }
  }
}

一：

        1、安装和配置postcss-px-to-viewport

命令：

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

        2、创建改变文字的.vue页面

<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 10px;">
			<slider
				:min="16.25"
				:max="30.25"
				:value="fontValue"
				@change="sliderChange"
				:step="2.5"
			/>
			<view class="change-fontsize-box">
				<text style="font-size: 12px;">
					最小
				</text>
				<text style="font-size: 14px;">
					标准
				</text>
				<text style="font-size: 16px;">
					最大
				</text>
			</view>
		</view>
		<view style="padding: 20px 10px;width: 100%;">
			<button type="primary" @click="submit">确定</button>
			<!-- <u-button type="primary" @click="submit">确定</u-button> -->
		</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			fontValue: 18.75,
		};
	},
	onShow() {
		this.fontValue = this.vuex_fontsize;
	},
	methods: {
		sliderChange(e) {
			this.fontValue = e.detail.value;
		},
		submit() {
			// this.$u.vuex('vuex_fontsize', this.fontValue);
			// this.$store.commit('changefont_size',this.vuex_fontsize)
			uni.setStorageSync("fontSize", this.vuex_fontsize);
			uni.showToast({
				title: '设置成功',
				icon:'none',
				duration: 1500
			});
			uni.reLaunch({
				url:'/pages/index/index'//跳转到自己的页面 
			})
		},
	},
};
</script>
 
<style>
.fontchange {
	font-size: 0.8rem;
	margin: 20px 0;
}
.content {
      
      
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}
.change-fontsize-box{
      
      
	margin: 10px 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
</style>

3.在项目中用vuex的可以在数据源中加上，没有的直接在本地存储

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

 4、在App.vue文件中读取缓存的文字大小值  

onLaunch: function() {
    
    
	//读取Storage里的字体大小
	let fontsize = uni.getStorageSync("fontSize")
	if (fontsize) {
    
    
		//this.$u.vuex('vuex_fontsize',  fontsize);
	}
}

在需要改变字体的页面上加以下代码

<page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta>
<view>
    ...
</view>
<script>
	export default {
		data() {
			return {
				title: 'Hello',
				vuex_fontsize:null
			}
		},
		onShow() {
			this.vuex_fontsize = uni.getStorageSync('fontSize');
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

 二：

1、在根目录下创建utils文件夹并创建fongbase.js

export default {
    created() {
        const self = this;
 
    },
    mounted() {
        const self = this;
    },
    methods: {
        //设置字体
        getRootFontSize(){
            const self = this;
            var fontSize = getApp().globalData.rootFontSize;
            if(fontSize){
                return fontSize;
            }else{
                fontSize = uni.getStorageSync('root_font_size');
                if(fontSize){
                    getApp().globalData.rootFontSize=fontSize;
                }else{
                    fontSize='12px';//默认字体大小
                    self.setRootFontSize(fontSize);
                }
                return fontSize;
            }
        },
        setRootFontSize(fontSize){
            uni.setStorageSync('root_font_size',fontSize);
            getApp().globalData.rootFontSize=fontSize;
        },
 
    }
}

2、创建修改文字的.vue页面

<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="content">
		<view class=""><view class="" :style="`font-size:${value};`">文字大小</view></view>
		<view class="" style="width:100%;padding: 0 20rpx;">
			<slider
				style="width: 100%;"
				min="12"
				max="48"
				:value="fontValue"
				@change="sliderChange"
				show-value
				step="2"
			/>
		</view>
		<button type="primary" @click="submit">确定</button>
	</view>
</template>
 
<script>
import fontbase from '@/utils/fongbase.js';
export default {
	extends: fontbase,
	data() {
		return {
			fontValue: 12,
			value:''
		};
	},
	onLoad() {},
	onShow() {
		let a = this.getRootFontSize();
		let aa = a.substring(0, 2);
		this.fontValue = Number(aa);
	},
	methods: {
		submit() {
			uni.reLaunch({
				url:'/pages/index/index'
			})
			console.log('submit');
		},
		sliderChange(e) {
			console.log('value 发生变化：' + e.detail.value);
			const self = this;
			self.value = e.detail.value + 'px';
			let nowFontSize = e.detail.value + 'px';
			console.log(nowFontSize);
			self.fontEnd = nowFontSize;
			console.log(nowFontSize);
			self.setRootFontSize(nowFontSize);
		}
	}
};
</script>
 
<style lang="scss">
	.fontchange {
		font-size: 1rem;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 5px;
		box-sizing: border-box;
	}
	 
	.logo {
		width: 100%;
		/* height: auto; */
		margin-top: 10px;
	}
	 
	.text-area {
		display: flex;
		justify-content: center;
	}
	 
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

4、在需要改变字体的页面上加以下代码

<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="content">
		...
	</view>
</template>

<script>
	import fontbase from '@/utils/fongbase.js'
	export default {
		extends:fontbase,
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	
</style>