uni-app 两个相同的nvue页面字体大小不同

uni-app 两个相同的nvue页面字体大小不同

开发环境 版本号 项目创建方式
Windows 2017.8 HBuilderX

示例代码：

<template>
<text>首页</text>
</template> <script> export default { } </script> <style> </style> 

两个nvue页面都是一样的 但是首页跟其他页面字体显示的大小不一样

### 操作步骤：


<template>
<div>
<text>首页</text>
</div>
</template>  

<script>
export default {  
}
</script>  

<style>  
</style>

预期结果：

字体大小都是一样的


### 实际结果：


字体大小不同

更多关于uni-app 两个相同的nvue页面字体大小不同的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

只有首页不一样，首页也没引入其他的公共样式影响。

更多关于uni-app 两个相同的nvue页面字体大小不同的实战教程也可以访问 https://www.itying.com/category-93-b0.html


复现到了你的问题

在 nvue 页面中，字体大小不一致通常是由于页面继承的全局样式或页面层级样式差异导致的。虽然你的两个 nvue 页面代码相同，但可能受到以下因素影响：

  1. 页面样式继承：首页可能继承了 App.vue 或 pages.json 中全局样式，而其他页面可能被局部样式覆盖。
  2. 页面层级结构：首页作为首个页面，可能受到框架默认样式（如导航栏样式）影响。
  3. 字体单位问题：nvue 中推荐使用 px 作为字体单位，若使用 rpx 或 rem 可能导致渲染差异。

解决方案：

  • 检查全局样式：在 App.vue 或 pages.json 中检查是否设置了全局字体样式，并确认是否被首页继承。
  • 显式设置字体：在每个 nvue 页面的 <style> 中明确指定字体大小，例如：
    text {
  font-size: 32px;
}
回到顶部