你的位置：VALOR 中文站 > Sweat Economy中文网 >
发布日期：2025-01-04 10:29 点击次数：87
一、效果图
二、原理解析
要实现文字大小的动态切换，考虑到使用rem机制。只需要通过修改根节点的font-size值，就能改变文字呈现出来的大小
但是一般我们的项目始用的都是px或rpx单位，全局修改单位未免不现实。所以这里用到了postcss-px-to-viewport插件。
postcss-px-to-viewport可以帮助我们把项目的单位进行统一的转换，且不需要改动源代码。
所以思路为：
利用postcss-px-to-viewport把单位全部转换为rem把根节点font-size值写入vuex中。实现字体大小设置页面。修改大小后，要把值写入缓存和vuex。APP启动时，从缓存里读取上次设置的fontSize值，赋值给vuex_fontsize。其他需要被控制大小的页面，顶部添加代码：
（说明：写进缓存是为了下次进入页面时还能保留上次设置的值，写进vuex中是为了可以响应式修改。）
三、代码实现
（一）、安装和配置postcss-px-to-viewport
1、安装命令：
2、根目录下创建一个 postcss.config.js文件，文件内容如下：
（二）在vuex里定义vuex_fontsize
在你的store存储里添加变量，我设置的是
（三）实现字体设置页面
利用滑块，设置font-size的值。点击确定后，要把所设置的值写入vuex_fontsize和缓存里。
（四）App启动时，读取缓存值，赋值给vuex_fontsize
修改App.vue文件，添加以下代码
（五）其他页面引用
在需要用到的页面加上page-meta。如果是全局修改，就需要全部页面都加上这。
用开发者工具可以看到根节点html的font-size值可以被成功设置，且页面元素的单位都是rem。大功告成~
总结
到此这篇关于uniapp实现全局设置字体大小的文章就介绍到这了,更多相关uniapp全局设置字体大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
