【工作实践-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;的样式来替换。