使用css变量实现更改字体大小功能（vue3为例）

步骤实现：

1. 定义全局 CSS 变量：在你的主样式文件（通常是 App.vue 或一个单独的 CSS 文件）中定义全局 CSS 变量。

2. 创建 Vue 组件或组合式 API 来管理这些变量：你可以使用一个 Vue 组件或 Vue 的组合式 API（Composition API）来管理这些全局变量的值。

3. 使用 CSS 变量：在你的组件中使用这些 CSS 变量来设置样式。

4. 动态调整 CSS 变量：通过 Vue 的响应式数据来动态调整这些 CSS 变量的值。

1. 定义全局 CSS 变量

在你的 main.css 或 App.vue 中的 

3. 使用 CSS 变量

在你的其他组件中使用这些 CSS 变量。例如，在 MyComponent.vue 中：

4. 动态调整 CSS 变量

通过点击 FontSizeController 组件中的按钮，你可以动态调整全局 CSS 变量 --current-font-size 的值，从而影响使用了该变量的组件的样式。