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

时间:2024-03-17 18:55:18

问题:在浏览器页面退出登录按钮上“退出登录”字样消失,而在手机端页面正常;通过查看浏览器页面的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是微信小程序独有的、解决屏幕自适应的尺寸单位,在浏览器中展示时rpx是相对于整个屏幕宽度来说的,所以字会被挤出去。

解决:这里可使用width = 100vw;的样式来替换,或在uniapp写代码时进行条件注释,H5时使用vw,App时使用rpx。