常用单位
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。