html - 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 是一个正方形。调整窗口大小时，它会拉伸(stretch)。

知道为什么高度和宽度属性保持不变吗？

我知道这与 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 试图适应这一点，它会创建一个矩形。

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

在这里 fiddle :https://jsfiddle.net/vxgsq15u/