CSS3新增的视口单位Vh、Vw单位
视口单位vh、vw、vmin和vmax使得我们能够创建响应式布局，它们分别代表了浏览器窗口的高度、宽度，以及最小和最大值。
- vh（Viewport Height）：1vh等于视口高度的1%。
- vw（Viewport Width）：1vw等于视口宽度的1%。
- vmin（Viewport Min）：选取vh和vw中较小的值。
- vmax（Viewport Max）：选取vh和vw中较大的值。
例如，如果你设置一个元素的高度为10vh，那么不论浏览器窗口的实际高度是多少，这个元素的高度将始终是窗口高度的10%。
/* 设置元素高度为视口高度的10% */
div {
height: 10vh;
}
/* 设置元素宽度为视口宽度的10% */
div {
width: 10vw;
}
/* 设置元素高度和宽度都是视口较小维度的50% */
div {
height: 50vmin;
width: 50vmin;
}
/* 设置元素高度和宽度都是视口较大维度的80% */
div {
height: 80vmax;
width: 80vmax;
}使用视口单位可以创建布局，这些布局会根据用户调整浏览器窗口大小而自动适应。这在响应式设计中非常有用，可以提高用户体验。
评论已关闭