uniapp 常用尺寸单位

常用单位

px：指固定的屏幕像素

rpx：指响应式屏幕像素单位，可根据屏幕宽度自适应的动态单位，一般是以750宽的屏幕为基准进行对rpx的计算，详细的计算配置看：页面样式与布局 | uni-app官网

%：指屏幕像素的百分比，如宽度是100px的容器，设置他里面的元素为10%就是10px

vw：指视图宽度，如1vw就是可视屏幕宽度的1%

vh：指视图高度，如1vh就是可视屏幕高度的1%

各尺寸单位的演示示例

<template>
	<view class="box testpx">px尺寸单位演示</view>
	<view class="box testrpx">rpx尺寸单位演示</view>
	<view class="box testPercentage">%尺寸单位演示</view>
	<view class="box testvw">vw，vh尺寸单位演示</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.box{
	margin: 10rpx;
	background: pink;
}
.testpx{
	width: 200px;
	height: 200px;
}
.testrpx{
	width: 375rpx;
	height: 375rpx;
}
.testPercentage{
	width: 50%;
	height: 50%;
}
.testvw{
	width: 50vw;
	height: 50vh;
}
</style>

H5基于iPhone12pro屏幕宽高效果

H5基于iPd Mini的屏幕宽高

 H5基于Samsung Galaxy S20 Ultra屏幕宽高

总结： px不管在什么样式的屏幕宽高的环境下都是固定的，使用这个单位开发程序的话，对屏幕宽高稍微大一点的手机或平板就不太友好了，相对而言rpx是根据屏幕的宽高响应式的改变，用这个尺寸单位，对于多种类的手机不同的屏幕宽高的响应就很友好；

百分比单位可以看到的是对高度不起作用，大家可以根据自己的情况选择；

vw和vh的作用就是跟%一样的，就如上面说到的1vw就是相当于可视屏幕宽度的1%，vh设置的高度也是可以背支持的，如果要做百分比的单位的高度话，可以用vh。