概念

vm 、vh、 upx、 rpx、 这几个单位是移动端的响应式单位。
px 、em 、rem 、% 、这几个常见的是web端的响应式单位（px除外）。

rpx 是小程序的等比例响应式单位，以750宽的屏幕为基准，750rpx恰好为屏幕的宽度。

至于upx单位，是uni-app框架给定的尺寸单位，upx和rpx是一样的原理，以750宽的屏幕为基准，750rpx恰好为屏幕的宽度。基本没区别，换了叫法，HbuilderX更新后，upx是为了兼容小程序的rpx。

vh 即viewpoint height，视窗高度，1vh等于视窗高度的1%，在小程序中，我们一般喜欢给最外围的最大的容器的高度设置为100vh，在视窗上铺满整个垂直的可视区域。

.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;

@import url()是导入外联样式表的写法

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

在app.vue里面写的样式是全局样式

，而在其他.vue文件里写的样式是局部样式,局部样式优先级高于全局样式，所以局部样式会覆盖全局样式，一般写样式的时候都喜欢加上scoped属性，避免不同页面间的样式受到影响。

<style scoped>
    
</style>