本文主要是介绍【工作实践-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;的样式来替换。
这篇关于【工作实践-07】uniapp关于单位rpx坑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
