[分享]css单位vm使用方法

CSS单位VM是指视口单位，也就是Viewport Unit，属于CSS3新增的单位，主要用于响应式设计。视口单位有四种：vw：1vw等于视口宽度的一部分，例如视口宽度为1000px时，1vw等于10...

CSS单位VM是指视口单位，也就是Viewport Unit，属于CSS3新增的单位，主要用于响应式设计。

视口单位有四种：

1. vw：1vw等于视口宽度的一部分，例如视口宽度为1000px时，1vw等于10px。

2. vh：1vh等于视口高度的一部分，例如视口高度为***px时，1vh等于8px。

3. vmin：1vmin等于视口宽度和高度中较小的那个值的一部分，例如视口宽度为1000px，视口高度为***px时，1vmin等于8px。

4. vmax：1vmax等于视口宽度和高度中较大的那个值的一部分，例如视口宽度为1000px，视口高度为***px时，1vmax等于10px。

使用VM单位时，可以避免使用固定像素值导致在不同分辨率、不同设备上显示效果差异的问题。

例如：

.container {
  width: 40vw;
  height: 30vh;
  font-size: 2vmin;
} 

在上面的例子中，容器的宽度为视口宽度的40%，高度为视口高度的30%，字体大小为视口宽度和高度中较小的那个值的2%。

需要注意的是，VM单位的兼容性不太好，部分老版本的浏览器不支持。同时，在使用VM单位时，需要考虑到视口大小的变化对布局、字体等的影响。