说明:部分业务场景可能会使用到老年模式,比如浙里办应用上线;本次记录uniapp的老年模式解决方案;引用插件,将项目中的字体单位rpx换成rem,结合官网提供的page-meta属性,通过控制根字体大小,达到调节字体大小要求。
1. 第一步:创建uniapp项目
2. 第二步
安装第三方插件postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
3. 第三步
项目根目录创建postcss.config.js,并写入如下配置:
// 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': {}
}
}
4. 第四步
使用vuex状态管理,将当前的字体大小设置进行存储、修改
5. 第五步
在需要适配老年模式的页面<template>
中加入以下代码
<template>
<page-meta :root-font-size="`${this.$store.state.elderModeSize}px`"></page-meta>
<view> 页面内容 </view>
</template>
***注意事项:此种方法navbar和tabbar的字体大小不能改变 ***
思考:uniapp按理来说是可以根据设备的字体大小来做适配的,但是应该如何实现?
评论区