【uniapp】uniapp设置改变全局字体大小功能:

文章目录


一、效果:




二、文档:

**思路:**通过保存需要的字体大小,然后在页面设置page-meta设置根节点大小,来实现控制字体的大小
custom-tab-bar | uni-app官网
uniapp改变设置改变全局字体大小功能_uniapp根据设计稿设置根元素的字体大小-CSDN博客
uniapp设置字体大小,老年模式

三、案例:引用插件,将项目中的字体单位rpx换成rem,结合官网提供的page-meta属性,通过控制根字体大小,达到调节字体大小要求。

1.安装第三方插件postcss-px-to-viewport

vue 复制代码
npm install postcss-px-to-viewport --save-dev

2.项目根目录创建postcss.config.js,并写入配置:

javascript 复制代码
// 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': {}
  }
}

3.根据页面设置,vuex取出设置大小

vue 复制代码
<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt" style="margin-top: 50rpx;">
      <view class="titleBox">
        <view style="font-size:25rpx">小</view>
        <view style="font-size:30rpx">标准</view>
        <view style="font-size:35rpx">中</view>
        <view style="font-size:40rpx">大</view>
      </view>
      <view>
        <slider min="2.6" max="5.6" :value="fontValue" @change="sliderChange" show-value step="1"/>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        fontValue:3.6,
      }
    },
    onLoad() {
      this.fontValue = this.$store.state.scaleFontSize
    },
    methods: {
      sliderChange(e) {
        // console.log('value 发生变化:' + e.detail.value)
        this.$store.commit('setScaleFontSize',e.detail.value)
        console.log(this.$store.state.scaleFontSize)
        // 使用uni.reLaunch跳转到某个页面,并关闭所有页面
        uni.reLaunch({
          url:"../login/login"
        })
      },
    }
  }
</script>
<style>
  .titleBox{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30upx 0;
    margin-left: 5%;
  }

</style>

4.在每个页面中通过添加page-meta调节,page-meta 配置项参考链接

vue 复制代码
<template>
  <page-meta :root-font-size="`${this.$store.state.scaleFontSize}px`"></page-meta>
  <view></view>
</template>

此种方法navbar和tabbar的字体大小不能改变。

相关推荐
2501_915918417 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
用户9047066835717 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
乔冠宇18 小时前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡18 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa18 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名21 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
游戏开发爱好者81 天前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915106321 天前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 天前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式