时间戳

首页 > 解决方案 > DIV 缩放时变为矩形

html - DIV 缩放时变为矩形

问题描述

我有一个叫做 DIV 的 DIV square，当它的宽度超过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;被使用有关，但我不确定还有什么其他解决方案可以保留它[] [] []

而不是;

[] [] []

调整浏览器宽度时。

提前致谢 ：）

标签： htmlcss

解决方案

It's because for small screens, the width continues to shrink while the height is the same. Using vh in your media query is trying to accommodate for this and it creates a rectangle.

I would make your css uniform if you want to prevent the red squares from becoming rectangles on smaller screens.

Fiddle here: https://jsfiddle.net/vxgsq15u/

推荐阅读