概念
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>
