【工作实践-07】uniapp关于单位rpx坑

**问题：**在浏览器页面退出登录按钮上"退出登录"字样消失，而在手机端页面正常;通过查看浏览器页面的HTML代码，发现有"退出登录"这几个字，只不过由于样式问题，这几个字被挤到看不见了。

样式代码中有一行为：width: 750rpx

.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;的样式来替换。