vite vue3 vant搭建h5项目如何调整页面字体大小

在Vite + Vue3 + Vant框架中，要调整H5项目的页面字体大小，你可以通过以下几个步骤来进行：

1. 首先，在Vue组件中，推荐使用CSS变量来管理全局的字体大小。这使得样式更具灵活性。可以在`main.js` 或 `src/assets/css/global.css` 这样的全局样式文件中设置初始字体大小：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { applyConfig } from '@vant/vant'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {},
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          '@primary-color': '#333', // 可以将这个变量改为你想设定的默认字体颜色，同时设置字体单位为rem
          '@font-size-base': '16px',
        },
      },
    },
  },
})

// src/assets/css/global.less 或 global.css
@font-size-base: 16px; // 设置默认字体大小

2. 使用CSS变量`--FontSize`来响应式地控制字体大小，例如：

html,
body {
  font-size: var(--FontSize, 16px);
}

/* 在需要的地方应用不同的字体大小 */
.button {
  font-size: calc(var(--FontSize) * 0.8); /* 示例，按钮的字体大小通常是基础字体大小的一半 */
}

3. 在需要动态改变字体大小的地方，可以创建一个自定义方法，如`setFontSize(size)`，然后在JavaScript或Vue组件中调用它：

// 例子是在一个按钮点击事件中更改字体大小
<button @click="setFontSize('14px')">减小字号</button>

methods: {
  setFontSize(fontSize) {
    document.documentElement.style.setProperty('--FontSize', fontSize);
  },
}

这样，用户可以根据需求更改全局或局部的字体大小。