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

**问题:**在浏览器页面退出登录按钮上"退出登录"字样消失,而在手机端页面正常;通过查看浏览器页面的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;的样式来替换。

相关推荐
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw8 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者13 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮15 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘18 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero21 小时前
UniappDay03
vue.js·微信小程序·uni-app
游戏开发爱好者82 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖2 天前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲2 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app