uniapp 适配横屏设计图

日常记录：在使用uniapp做app某个功能时，因为设计需要，当前页面需要固定横屏展示，因此发现常规的rpx像素并不能兼容横屏的样式。 因此，尝试使用CSS3的新单位vmin和vmax.

vmin和vmax是CSS3中的新单位，是一种视窗单位，也是相对单位。它们的大小都是由视窗大小来决定的，单位1，代表类似于1%。

详细使用如下：

<template>
	<view class="conter">
		<view class="box">
			横屏300rpx*300rpx
		</view>
		<view class="box box2">
			横屏300rpx适配下的vmin
		</view>
	</view>
</template>

<script>
	export default {
    
    
		onReady() {
    
    
			// #ifdef APP-PLUS
			plus.screen.unlockOrientation();
			plus.screen.lockOrientation('landscape-primary');
			// #endif
		},
		onUnload() {
    
    
			// 注意，当页面卸载后，如果返回的不是横屏，记得要切换一下屏幕，避免页面样式错乱
			// #ifdef APP-PLUS
			plus.screen.unlockOrientation();
			plus.screen.lockOrientation("portrait-primary")
			// #endif
		},
	}
</script>

<style lang="scss" scoped>
	@function tovmin($rpx) {
    
    
		//$rpx为需要转换的字号
		@return #{
    
    $rpx * 100 / 750}vmin;
	}

	.conter {
    
    
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		position: relative;

		.box {
    
    
			width: 300rpx;
			height: 300rpx;
			background: red;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.box2 {
    
    
			width: tovmin(300);
			height: tovmin(300);
			background: blue;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}
	}
</style>

效果如下：