概念

.container {
      height:100vh;
}

以rpx为例子测试

当我们将屏幕的宽度设为750rpx,查看效果。

<template>
    <view class="container">
    
    </view>
</template>

<style>
    .container {
        width: 750rpx;
        height: 750rpx;
        background-color: #4CD964;
    }
</style>

我们可以看到rpx单位的宽度是响应式的和手机设备宽度保持一致。

按照上面这种换率，我们可以得出750rpx响应当前设备整个屏幕，那么375rpx及为当前设备屏幕的一半（任何设备）。

为了测试rpx响应效果，我们可以切换不同的设备看一下。

我们可以看到rpx可以自动适应不同的屏幕宽度，当屏幕发生变化。宽度达到自适应的效果。

同样rpx也可以作用在font-size上，达到适应不同设备屏幕的宽度自适应效果。

font-size: 40rpx;

<style>
    @import url("./style.css");
</style>

<style scoped>
    
</style>