vmax vmin 

<body>
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
</body>
.box1 {
  width: 10vw;
  height: 10vh;
}

/* 
  高度和宽度取较长边的值
  宽度和高度始终和box盒子长边相等
*/
.box2 {
  width: 10vmax;
  height: 10vmax;
}

/* 
  高度和宽度取较长边的值
  宽度和高度始终和box盒子短边相等
*/
.box3 {
  width: 10vmin;
  height: 10vmin;
}

.box{
  border: 1px solid #ccc;
}
.box+.box{
  margin-top: 20px;
}

示例图

posted @ 2023-03-09 15:15  丿流水  阅读(45)  评论(0)    收藏  举报