uni-app font-size在2层view下字号偏大 内联样式也不生效
uni-app font-size在2层view下字号偏大 内联样式也不生效
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | win10 专业版 | HBuilderX |
产品分类:uni-app x/App
PC开发环境操作系统:Windows
PC开发环境操作系统版本号:win10 专业版
HBuilderX类型:正式
HBuilderX版本号:4.66
手机系统:Android
手机系统版本号:Android 13
手机厂商:华为
手机机型:荣耀100
页面类型:vue
vue版本:vue3
打包方式:云端
项目创建方式:HBuilderX
示例代码:
示例如下
样式>>
.itemmodule {
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-left: 11px;
padding-right: 11px;
margin-bottom: 5px;
}
.itemouter {
height: 66px;
width: 62px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.itempic {
height: 25px;
width: 25px;
margin-top: 5px;
}
.itemnote {
width: 62px;
line-height: 24px;
font-size: 13px;
text-align: center;
}
}
ui使用–> <view class="itemmodule"> <view class="itemouter"> <image class="itempic" src="/static/images/services/1.png" mode="aspectFit"></image> <text class="itemnote">请假</text> </view> <view class="itemouter"> <image class="itempic" src="/static/images/services/2.png" mode="aspectFit"></image> <text class="itemnote">销假</text> </view> <view class="itemouter"> <image class="itempic" src="/static/images/services/3.png" mode="aspectFit"></image> <text class="itemnote">统计</text> </view> <view class="itemouter"> <image class="itempic" src="/static/images/services/4.png" mode="aspectFit"></image> <text class="itemnote">下载</text> </view> <view class="itemouter"> <image class="itempic" src="/static/images/services/5.png" mode="aspectFit"></image> <text class="itemnote">快照</text> </view> </view>
## 操作步骤:
上面的代码搞下来弄一下就可以了
## 预期结果:
font-size:13px 正常显示
## 实际结果:
字体偏大1号
bug描述:
font-size字号变大 用内联样式修改也没有作用 整个项目就一个页面 没有css污染
如果把Image标签注释掉字体可以显示正常 如果不注释就不行 或者弄成2行 第一行显图片 第二行显文字 也可以正常 就是组合起来就完蛋 放到最外层的时候可以 用itemouter 及子CLASS是正常的放里面不行 官方查一下吧
更多关于uni-app font-size在2层view下字号偏大 内联样式也不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于uni-app font-size在2层view下字号偏大 内联样式也不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个典型的uni-app样式继承问题。问题出在嵌套view结构下的字体大小计算方式。
原因分析:
- uni-app在Android平台下,嵌套view结构中的text组件会受到父容器的影响
- 当text组件与image组件同在一个flex布局中时,系统可能会自动调整字体大小以适应布局
解决方案:
- 给text组件添加
!important
强制样式:
.itemnote {
font-size: 13px !important;
}
- 或者改用rpx单位更稳定:
.itemnote {
font-size: 26rpx; /* 约等于13px */
}
- 也可以尝试给外层view添加固定字体大小:
.itemouter {
font-size: 13px;
}