app.vue中无法更改document.documentElement.style.fontSize 的样式嘛

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" } } } ``` 请注意，以上方法可能需要结合你的实际项目情况调整。如果问题依旧存在，可能需要检查是否有其他框架或插件在内部修改了样式。

可以使用CSS Media Queries和rem单位来实现自适应和平行视觉效果。 示例代码如下： ``` <template> <div class="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App', created() { // 监听窗口大小变化，重新计算根字体大小 window.addEventListener('resize', this.setRemUnit) this.setRemUnit() }, methods: { // 设置根字体大小 setRemUnit() { const viewWidth = document.documentElement.clientWidth const rem = viewWidth / 10 document.documentElement.style.fontSize = rem + 'px' } } } </script> <style> /* 移动端样式 */ .app { width: 100%; height: 100%; background-color: #fff; } /* 宽屏设备平行视界效果 */ @media screen and (min-width: 1200px) { .app { display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1000px; } .app > * { transform: translateZ(-200px); } } </style> ``` 在上面的代码中，我们先使用rem单位来实现移动端自适应，然后使用CSS Media Queries来针对宽屏设备进行样式调整，实现平行视界效果。其中，perspective属性和translateZ属性是用来实现3D视觉效果的。