Css单位px，rem，em，vw，vh vm的区别

px

px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

em

em是相对于父元素的字体尺寸，如果父元素没设置则相对于浏览器设置的默认字体尺寸。所以em的值每次都可能不一样。

rem

rem是相对于HTML根元素的字体大小来计算的，有设置html的字体大小的时候就会以默认字体大小16px设置。所以html{font-size: 62.5%}（10÷16），这样设置1rem就等于10px了，方便计算。

vw,vh

是相对于浏览器可视的宽度和高度定的,比例是1/100
假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

.test {
  border:1px solid green;
  height:10vh;
  width:10vw;
}

浏览器可视宽度小的时候

浏览器可视宽度大的时候，发现宽度也跟着变宽了

vm

和vw,vh类似，只不过取的是浏览器可视宽度和高度中的最小值作为基准
比如浏览器高度900px，宽度1200px，取最小值900，1 vm = 900px/100 = 9 px

参考

Css单位px，rem，em，vw，vh的区别