**问题:**在浏览器页面退出登录按钮上"退出登录"字样消失,而在手机端页面正常;通过查看浏览器页面的HTML代码,发现有"退出登录"这几个字,只不过由于样式问题,这几个字被挤到看不见了。
样式代码中有一行为:width: 750rpx
html
.fixed-bottom {
position: fixed;
bottom: 160rpx;
width: 750rpx;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: var(--fixedBottomHeight);
background-color: $uni-bg-color;
}
原因:
官方文档: rpx 即响应式px,是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx,750rpx就是屏幕最大宽度,样式宽度不能超过750rpx。
但rpx不支持web网页,仅支持小程序。究其根本就是web和小程序样式的兼容问题。
各单位区别如下:
单位名称 | 说明 | web | 小程序 |
---|---|---|---|
px | 绝对单位。代表像素数量 | 支持 | 支持 |
em | 相对单位。相对于父元素的字体大小 | 支持 | 支持 |
rem | 相对单位。相对于页面根标签 html 的字体大小 | 支持 | 不支持 |
vw | 相对单位。相对于视口的宽度大小 ,100vw 等于视口的宽度 | 支持 | 支持 |
rpx | 相对单位。 小程序中独有 , 750rpx 等于视口的宽度 | 不支持 | 支持 |
解决:
由上表可看出vw既支持web,又支持小程序,因此这里可使用width = 100vw;的样式来替换。