一些CSS计算单位

PX

px

CSS像素的单位也叫做px。它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。

默认情况下一个CSS像素等于一个物理像素的宽度

但是在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。 对应的屏幕也就是所谓的2倍,3倍屏。

EM

em

相对于父元素大小

REM

rem

类似于em,不同的是：rem是相对于html元素的大小。

例如:

根元素(html) 设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px

VW / VH

相对视口尺寸 100:1 计算

vw: viewport width

1vw =1/100视口宽度

vh: viewport height

1vh =1/100视口高度

VMIN /VMAX

vmin

使用可视窗口小那一边用作单位比例

可视窗口：宽 < 高时 ,宽用作比例, 所以:1vm =1vw

可视窗口：宽 > 高时 ,高用作比例, 所以1vm =1vh

vmax

使用可视窗口大的那一边用作单位比例

可视窗口：宽 < 高时 ,高用作比例, 所以1vm =1vh

可视窗口：宽 > 高时 ,宽用作比例, 所以1vm =1vw

示例说明

手机竖屏情况下，可视窗口:宽 < 高

宽度设置vmin : 1vm = 1vw = 物理屏幕宽度/100

高度设置vmax : 1vm = 1vh = 物理屏幕高度/100

手机横屏情况下，可视窗口:宽 > 高

宽度设置vmin : 1vm = 1vh = 物理屏幕高度/100

高度设置vmax : 1vm = 1vw = 物理屏幕宽度/100

由此得出结果

用 vmin 指定宽度，用 vmax 指定高度，能适配 宽高互换的情况

注意

vm ,vh 不会随着可视区域的旋转而改变取值,vm永远是取屏幕标准上宽度，,vh永远是取屏幕标准上的高度。

旋转只是概念上的互换宽高，或者说旋转并不改变宽高，而是改变视角