我正在开发一个 web 应用程序,它将根据用户对 N 的选择生成一个 NxN 网格。我希望网格的总宽度是相对的(即 100% 的可用空间),以便用户可以在各种纸张尺寸上打印.
我可以通过 % 轻松计算网格中正方形的宽度(即:100%/N),但在计算高度时遇到问题。网页的高度总是无限的,除非我人为地限制它,就像我说的那样,我不想这样做。
当我的网格的高度和宽度约束是动态的而不是正方形时,如何使网格中的正方形变成正方形而不是矩形?
我正在开发一个 web 应用程序,它将根据用户对 N 的选择生成一个 NxN 网格。我希望网格的总宽度是相对的(即 100% 的可用空间),以便用户可以在各种纸张尺寸上打印.
我可以通过 % 轻松计算网格中正方形的宽度(即:100%/N),但在计算高度时遇到问题。网页的高度总是无限的,除非我人为地限制它,就像我说的那样,我不想这样做。
当我的网格的高度和宽度约束是动态的而不是正方形时,如何使网格中的正方形变成正方形而不是矩形?
有 2 种主要技术可以使用 padding 和 vw 单位来保持响应式元素的纵横比:(
对于响应式正方形网格的完整解决方案,您可以看到这个答案)
您可以使用vw
单位来使您的元素呈方形和响应式(MDN 上的视口单位)。因此您可以根据视口的宽度(或带单位的高度)
1vw = 1% of viewport width
设置元素的高度。
4x4 网格的示例:vh
body{
margin:0;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
div{
width:23vw; height:23vw;
margin:1vw 0;
background:gold;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
使用单位根据视口高度调整元素大小可以实现相同的行为vh
。
填充是根据容器宽度计算的,因此您可以使用它来根据块的宽度设置块的高度。
4x4 网格的示例:
.wrap {
width:80%;
margin:0 auto;
}
.wrap div {
width:23%;
padding-bottom:23%;
margin:1%;
float:left;
background:gold;
}
<div class="wrap">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
使用 CSS 将 div 制作成正方形非常容易。你设置一个宽度,比如说 50%。然后添加相同值的 padding-bottom:
div {
width: 50%;
padding-bottom: 50%;
}
每当您调整窗口大小时,它都会保持正方形。
.
.
你可以用任何你想要的边比来做到这一点,如果你想让盒子是 16:9 你计算:
9/16= 0.56
然后乘以元素的宽度(在本例中为 50%(=0.5)),因此:
9/16*0.5= 0.28 = 28%
这是未经测试的,我不知道如何仅在 CSS 中执行此操作,我会使用 jQuery。
$('div').height($('div').width());
上述解决方案不保留区域 - 这个更好
//@param {jQuery} div
function makeSquare(div){
//make it square !
var oldDimens = {
h : div.height(),
w : div.width()
};
var area = oldDimens.h * oldDimens.w;
var l = Math.sqrt(area);
div.height(l).width(l);
}