vue3中常见单位及响应式单位rpx

1.常用单位

1.1 px

此时画了一个盒子模型，宽度和高度都是200px

此时效果就是这样的

1.2 vw

现在更改成了40vw，看看效果是怎么样的

vw也就是在整个页面中的占比量，40vw就是占整个页面的40%

使用%这个也是同样的效果，都是在页面中的占比量

最直观的区别就是切换页面大小，就可以看出很明显的区别

1.3. rpx

rpx其实与vw有些相似，但是最大的区别就是vw是根据页面的百分比来计算的

而rpx是根据指定的宽度（750）来计算的

此时设置的是375rpx，根据计算（750/375）也就是相当于一半的宽度

所以无论现在换成什么页面，他始终都是占据一般的页面

所以说rpx是根据固定的算法来计算的（750 / 值）

此时的高度也设为rpx 的单位，但是高度可不是与宽度一样的计算方式

高度的最大为（960） 所以说高度计算就是（960 / 值）

所以此时为480 也正好相当于一半

所以就可以看到高度确实是一半了