CSS新单位：vmin和vmax

Even Xiao

已于 2024-03-22 00:00:22 修改

阅读量1.3k

点赞数 1

文章标签： css

于 2023-11-07 15:53:24 首次发布

本文链接：https://blog.csdn.net/weixin_53653634/article/details/134269363

版权

在响应式网页设计中，我们经常需要根据视口的尺寸来设置元素的大小。为了方便进行这种布局，CSS引入了两个相对单位：vmin和vmax。

vmin表示相对于视口宽度和高度中较小者的百分比。

例如，如果视口的宽度为1000px，高度为800px，那么1vmin就等于8px（即800px的0.1）。

vmax表示相对于视口宽度和高度中较大者的百分比。

例如，如果视口的宽度为1000px，高度为800px，那么1vmax就等于10px（即1000px的0.1）。

使用vmin和vmax单位可以根据视口的宽度和高度来设置元素的大小，实现响应式布局。

以下是一个示例，演示如何使用vmin和vmax单位设置元素的宽度和高度：

.container {
  width: 50vmin;    /* 相对于视口宽度和高度中较小者的50% */
  height: 50vmax;   /* 相对于视口宽度和高度中较大者的50% */
  background-color: #f2f2f2;
}

在这个示例中，.container元素的宽度将占据视口宽度和高度中较小者的50%，而高度将占据较大者的50%。

使用vmin和vmax单位可以使布局更具响应性和灵活性，无需依赖特定的屏幕尺寸来设置元素的大小。

需要注意的是，vmin和vmax单位的兼容性可能不如其他单位（如px）广泛支持，请在使用时进行兼容性检查和测试。

关注