uniapp的app.vue的onLaunch中 document.documentElement.style.fontSize 设置了字体大小, 但是这个框架又给我把字体大小改成16px了, 如何在我这了字体大小之后 不让他修改
时间: 2024-09-13 10:03:53 浏览: 115
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,它允许开发者编写一次代码,然后发布到iOS、Android、Web(包括微信小程序)等平台。在 uni-app 中,`app.vue` 是应用的根组件,而 `onLaunch` 是生命周期钩子,用于应用启动之后执行。
在 `onLaunch` 中设置 `document.documentElement.style.fontSize` 是为了定义应用的基本字体大小。但有时候,uni-app 内部可能在某些阶段重新设置了文档的字体大小,比如为了适配不同屏幕或者是为了满足一些默认样式的要求。
如果你在 `onLaunch` 中设置了字体大小后发现被覆盖,你可以尝试以下方法来解决:
1. **使用 `:root` 伪类变量**:
在 CSS 中使用 `:root` 伪类来设置一个全局变量,这样可以在整个应用中统一修改字体大小。
```css
:root {
--fontSize: 20px; /* 设置一个自定义的变量 */
}
```
然后在 `onLaunch` 中使用 JavaScript 来动态设置根元素的样式:
```javascript
onLaunch: function() {
document.documentElement.style.setProperty('--fontSize', '20px');
}
```
在其他样式表中使用这个变量:
```css
body {
font-size: var(--fontSize);
}
```
2. **使用 vue.config.js 配置**:
在项目的 `vue.config.js` 文件中添加自定义的 CSS 预处理器,这样可以在全局范围内覆盖默认的样式。
```javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 16, // 默认根字体大小
propList: ['*'] // 需要转换的属性
})
]
}
}
}
}
```
3. **使用 `hid` 属性**:
在 `App.vue` 中为 `manifest.json` 添加 `config` 字段,并使用 `hid` 属性来禁止系统默认样式:
```javascript
{
"app-plus": {
"deviceReadyInit": true,
"hardwareBackButton": false,
"fullScreen": true,
"statusBar": {
"titleNView": false
},
"distributeBackgroundAssets": false,
"subNVues": {
"default": "auto",
"multiWindow": {
"enable": true,
"waiting": true
}
},
"config": {
"titleBar": false,
"statusbar": false,
"navBar": false,
"statusBarColor": "#ffffff",
"hardwareAccelerated": true,
"renderer": "webview"
}
}
}
```
请注意,以上方法可能需要结合你的实际项目情况调整。如果问题依旧存在,可能需要检查是否有其他框架或插件在内部修改了样式。
阅读全文