DIV 缩放时变为矩形

Question

我有一个名为square的DIV，当宽度超过500px时，它可以作为正方形观看。

.squareholder {
display: flex;
width: 80%;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.square {
width: 12vw;
height: 12vw;
margin-left: 1vw;
margin-right: 1vw;
background-color: #ff0000;
border-radius: 2vh;
align-content: center;
}
@media only screen and (max-width: 500px) {
.square {
width: 30vh;
height: 30vh;
margin-left: 1vw;
margin-right: 1vw;
background-color: #ff0000;
border-radius: 2vh;
align-content: center;
}
}

<div class ="squareholder">
<div class ="square"><h1>Text</h1></div>
</div>

正常查看时，DIV 是一个正方形。当窗口调整大小时，它会伸展。

任何想法为什么给定高度和宽度属性保持不变？

我知道这与 flex 有关，但如果我连续添加三个;

.squareholder {
display: flex;
width: 80%;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.square {
width: 12vw;
height: 12vw;
margin-left: 1vw;
margin-right: 1vw;
background-color: #ff0000;
border-radius: 2vh;
align-content: center;
}
@media only screen and (max-width: 500px) {
.square {
width: 30vh;
height: 30vh;
margin-left: 1vw;
margin-right: 1vw;
background-color: #ff0000;
border-radius: 2vh;
align-content: center;
}
}

<div class ="squareholder">
<div class ="square"><h1>Text</h1></div>
<div class ="square"><h1>Text1</h1></div>
<div class ="square"><h1>Text2</h1></div>
</div>

所有框都排成一排。我需要它们仍然排成一排，只是为了在较小时保持正方形。我认为这与正在使用display: flex;有关，但我不确定还有什么其他解决方案可以保持[] [] []

而不是;

[] [] []

调整浏览器宽度时。

提前致谢:)

Answer 1

这是因为对于小屏幕，宽度继续缩小，而高度保持不变。在媒体查询中使用vh试图适应这种情况，并创建一个矩形。

如果你想防止红色方块在较小的屏幕上变成矩形，我会让你的 css 统一。

在这里小提琴：https://jsfiddle.net/vxgsq15u/