uniapp小程序横屏显示样式错乱

在开发中有时候会需要开发横屏页面，正常竖屏页面的样式横屏之后会放大错乱

首先横屏设置，page.json页面

{"path": "index/index","style": {"navigationBarTitleText": "横屏页面","pageOrientation":"auto" //支持 auto / portrait / landscape}
}

正常样式横屏后放大，rpx不适用，需要用px，vmin，百分比

vmax 相对于视口的宽度或高度中较大的那个，其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个，其中最小的那个被均分为100单位的vmin

这里我们用vmin，100vmin也就是手机屏幕宽度，一般设计图是750rpx

// rpx 转 vmin
@function vmin($rpx) {@return #{$rpx * 100 / 750}vmin;
}//使用方式,实现宽150rpx，高75rpx的盒子
.box {width: vmin(150);height: vmin(75);
}//也可以直接使用calc
.box {width: calc(150vmin / 7.5);height: calc(75vmin / 7.5);
}

退出横屏页面后进入竖屏页面样式放大错乱问题可以看这篇文章
https://blog.csdn.net/hu104160112/article/details/131511067?spm=1001.2014.3001.5501

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！