uni-app 项目改变全局字体大小（老年人大字模式）

最新推荐文章于 2025-11-08 10:30:47 发布

原创

最新推荐文章于 2025-11-08 10:30:47 发布 · 7.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #前端

针对老年用户，项目需求实现全局字体大小调节功能。采用方案一，仿微信字体调节器，通过在根节点设置全局字体大小并使用rem单位。关键步骤包括在Vue页面中修改js，将方法设为全局或每个页面引入，确保所有字体大小单位为rem，并在页面加载时从缓存获取字体大小设置。

需求：
使用手机应用的人员，是一些上了年纪的服务人员。我们的应用，字体是默认的字体大小。对于他们来说，看不清
方案：
1.做一个类似微信的字体大小调节器，将全局的字体进行调整
2.将应用的字体和设备字体的大小调整一致
（使用的是第一个方案，再网络上找的方法，关键是在根节点设置全局字体大小，其他元素节点用rem作为单位）
页面：
在这里插入图片描述
网络上解决办法：

vue页面

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