浅谈CSS3新单位vw、vh、vmin、vmax的使用详解

CSS3新增了四个相对于窗口尺寸的单位：vw、vh、vmin、vmax。这些单位可以帮助我们更好地控制和布局我们的网页元素。下面就详细介绍一下每种单位的用法和示例。

vw

vw表示相对于视口宽度的百分比，1vw等于视口宽度的1%。使用vw可以让元素的尺寸随着视口的变化而变化。例如，想将一个元素的宽度设定为视口宽度的50%，可以这样写：

.element {
  width: 50vw;
}

vh

vh表示相对于视口高度的百分比，1vh等于视口高度的1%。使用vh可以让元素的尺寸随着视口的变化而变化。例如，想将一个元素的高度设定为视口高度的50%，可以这样写：

.element {
  height: 50vh;
}

vmin

vmin表示相对于视口宽度和高度中较小的那个值的百分比。1vmin等于较小值的1%。使用vmin可以让元素的尺寸随着视口的变化而变化，但不会超过视口中较小的尺寸。例如，想将一个元素的宽度和高度都设定为视口尺寸中较小值的50%，可以这样写：

.element {
  width: 50vmin;
  height: 50vmin;
}

vmax

vmax表示相对于视口宽度和高度中较大的那个值的百分比。1vmax等于较大值的1%。使用vmax可以让元素的尺寸随着视口的变化而变化，但不会超过视口中较大的尺寸。例如，想将一个元素的宽度和高度都设定为视口尺寸中较大值的50%，可以这样写：

.element {
  width: 50vmax;
  height: 50vmax;
}

通过这四种单位的组合使用，可以实现更加灵活和动态的布局效果。例如，如下代码将在不同设备上显示不同的效果：

.element {
  width: 90vmin;
  height: 90vmin;
  max-width: 800px;
  max-height: 800px;
  margin: auto;
  background-color: #eee;
}

这个元素的宽度和高度都是视口宽度和高度中较小的那个值的90%，但是不会超过800px。当设备的宽度和高度都大于等于888px时，元素的大小将停留在800px，而在更小的视口尺寸下，元素的大小会相应地缩小。同时，设置了margin: auto，可以实现元素居中显示效果。

另外一个示例是，通过vw和vh使得一个图片在不同屏幕宽高比例下都能适应视口，同时设置图片宽高比例，代码如下：

.img {
  width: 100vw;
  height: 100vh;
  background: url(img.jpg) no-repeat center center;
  background-size: cover;
}

img {
  /* 设置宽高比例 */
  width: 40%;
  height: 60%;
}

这个代码中，图片容器的宽高都是100vw和100vh，表示占满整个视口，同时设置了背景图为img.jpg，并通过background-size: cover属性保证图片适应容器。在图片元素img中设置了宽高比例为40%和60%，将图片按照比例缩放到所在的容器中。

通过上述两个示例的介绍，我们可以看到，使用vw、vh、vmin和vmax这四个单位可以让我们更加灵活地控制元素的尺寸和布局效果，适应不同尺寸的设备和视口。