使用div标签的响应式俄罗斯方块网格

Question

我正在尝试使用javaScript和HTML构建一个俄罗斯方块游戏而不需要任何教程。我的方法很原始。我正在使用div标签制作我的网格。问题是它没有我预期的那么敏感。

这是我的网格中的一行：

                <div class="row">
                <div id="sq1" class="square fender">&nbsp;</div>
                <div id="sq2" class="square free">&nbsp;</div>
                <div id="sq3" class="square free">&nbsp;</div>
                <div id="sq4" class="square free">&nbsp;</div>
                <div id="sq5" class="square free">&nbsp;</div>
                <div id="sq6" class="square free">&nbsp;</div>
                <div id="sq7" class="square free">&nbsp;</div>
                <div id="sq8" class="square free">&nbsp;</div>
                <div id="sq9" class="square free">&nbsp;</div>
                <div id="sq10" class="square free">&nbsp;</div>
                <div id="sq11" class="square free">&nbsp;</div>
                <div id="sq12" class="square fender">&nbsp;</div>
            </div>

我正在为每个方块使用这种风格：

.square {
float: left;
width: 6%;
padding-bottom: 6%; 
border-top: 1px solid black;
border-left: 1px solid black;}

但是当我调整页面大小时，我的方块会变成矩形。我也使用类似的较小网格来显示下一个部分。它被其他标签包围，可能会使其变形。 （整个项目在codepen。）

是否有一些简单的方法使我的方块正方形？我找到了几种方法来制作响应方，但它们都没有为我工作。

Answer 1

你几乎已经拥有了你已经拥有的东西。

看看你的标记，你似乎想要连续12个方格，所以我用width: 8%;。而且，正如你正确尝试的那样，你需要添加一个匹配8％的padding-bottom。例如。

.square {
    float: left;
    width: 8%;
    padding-bottom: 8%; /* = width for a 1:1 aspect ratio */
    border-top: 1px solid black;
    border-left: 1px solid black;
}

你的方块没有固定在它们的纵横比上的原因是因为你添加到你所有的 正方形的div。你不能直接在正方形内添加内容（没有绝对定位的孩子）因为它会增加它们的高度，因此正方形不再是正方形。

一旦删除所有这些不间断的空格，您的方块将保持其纵横比。

最后，我整理了几个虽然不相关的HTML错误，完整的分叉示例如下：https://codepen.io/ahdigital/pen/LeNNWY?editors=1100