<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;
}