在 Vue 项目中修你该这样做-有几种简单的方法可以帮你搞定-如何在 Vue 中修改基础字号

在 Vue 项目中修改基础字号，你该这样做！

想要在 Vue 项目里调整字体大小？别急，有几种简单的方法可以帮你搞定。

方法一：全局 CSS 文件定义基础字号

在 src/assets/css 目录下创建一个全局样式文件，比如叫 global.css。然后在里面定义基础字号，接着在 main.js 文件中引入这个样式文件。

1. 创建 global.css 文件。
2. 在 main.js 中引入 global.css。

这样，你的 Vue 项目的基础字号就被设置为 16px 了。

方法二：组件中使用局部样式

如果只是想调整某个组件的字体大小，直接在该组件的 style 标签中定义即可。

style="font-size: 14px;" 

这种方法适合局部调整字号。

方法三：使用 CSS 预处理器定义变量

使用 SCSS 或 LESS 定义变量来设置基础字号，然后在项目中引用这些变量。

1. 安装 SCSS 或 LESS。
2. 在 src/assets/css 目录下创建 SCSS 文件，比如 styles.scss。
3. 在 main.js 中引入 SCSS 文件。

这样，基础字号设置为 16px，并且可以通过修改 SCSS 变量轻松全局调整。

方法四：动态修改根元素的字体大小

在 Vue 组件的生命周期钩子中，通过 JavaScript 动态修改 html 或 body 元素的字体大小。

methods: { changeFontSize() { document.documentElement.style.fontSize = '18px'; } } 

点击按钮后，根元素的字体大小会变为 18px。

在 Vue 项目中修改基础字号，你可以根据需要选择合适的方法。全局定义、局部调整、使用预处理器变量或动态调整，都可以让你更灵活地控制字体大小，提升用户体验。

建议

• 全局定义基础字号：使用全局 CSS 文件或 CSS 预处理器变量。
• 局部调整字号：直接在组件的 style 标签中定义。
• 动态调整字号：通过 JavaScript 修改根元素的字体大小。

FAQs