如何在屏幕宽度变化时使网格中的正方形瓷砖均匀增长和收缩

Question

我正在构建一个游戏，左侧是棋盘，右侧是计分区。随着浏览器的扩展，我希望棋盘上的各个图块保持正方形。截至目前，它们在宽度方向上增长，但在高度上没有增长。

开始设置：

但是在 window 变宽之后，瓷砖变成了矩形：

如何在调整浏览器 window 大小时使图块保持正方形？

这是 .html 文件的相关部分：

<div class="board">
    <div class="square" id="square1">5</div>
    (...and 15 more like the above line...)
</div>
    
<div class="score">
    <h1>Score:</h1>
    <h2>0</h2>
</div>

JavaScript 绘制 tiles/squares:

的函数

function drawSquares() {
    for(let i = 1; i < 17; i++) {
        const square = document.createElement('div')
        square.setAttribute('class', 'square')
        square.setAttribute('id', ('square'+i))
        square.innerText = randArr[i-1]
        board.appendChild(square)
    }
}

和我的全部 CSS，因为我不确定要更改哪一部分：

body {
    display: flex;
}

.board {
    height: 370px;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(172, 170, 170);
    padding: 1%; 
    margin: 1%;
}

.score {
    background-color: rgb(172, 170, 170);
    margin: 1%;
    width: 30%;
} 

.square {
    height: 23%;
    width: 23%;
    background-color: rgb(121, 120, 117);
    margin-left: 1%;
    margin-right: 1%;
    justify-content: center;
    align-items: center;
    font-size: 5vh;
    color: rgb(121, 120, 117);
}

h1, h2 {
    text-align: center;
}

（.square CSS 选择器为图块设置样式）

Answer 1

强制使用正方形（或任何其他）宽高比的动态大小元素是纯 CSS 最难解决的问题之一。使用 javascript 可能更容易确保 board 元素的 width/height 比率保持 1:1.

它可能看起来像这样：

// Your example uses a class called board so maybe change it to an id or write your own js here:
let board = document.getElementById('board');

// Get width or height of board, whichever is smallest.
let size = Math.min(board.scrollHeight, board.scrollWidth);

// Set size of board.
board.style.width = size + 'px';
board.style.height = size + 'px';

请注意，当 window 调整大小时，上面的代码片段不会再次运行，因此您可能希望将板放入一个容器中，该容器可以增长到最大可用 space并取其中的最小维度并将 JS 包装在 window.onresize event-listener.

中

Answer 2

为了在响应式设计中保持宽高比，使用与 width 相同的 height 并不如您所见。高度取决于具有显式高度集的包含块，但在响应式网格中，我们不需要固定高度。

相反，您可以使用填充，因为它将以与宽度相同的方式计算容器的百分比。您可以将 .square class 更改为：

.square {
    width: 23%;
    height:0;
    padding-bottom: 23%;
    /* Rest of your CSS... */
}

这是做什么的：

我们可以将 padding-bottom 设置为与宽度相同 - 在本例中为 23% - 以制作正方形
将高度设置为 0，以便 padding-bottom 是唯一增加高度的东西

这为您提供了一个完全响应的网格，无论屏幕大小如何，它都保持相同的纵横比。

工作代码段：

function drawSquares() {
    for(let i = 1; i < 17; i++) {    
        const square = document.createElement('div')
        square.setAttribute('class', 'square')
        square.setAttribute('id', ('square'+i))
        square.innerText = [i];
        board = document.getElementsByClassName('board')
        board[0].appendChild(square)
    }
}
drawSquares();

body {
    display: flex;
}

.board {
    height: auto;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(172, 170, 170);
    padding: 1%; 
    margin: 1%;
}

.score {
    background-color: rgb(172, 170, 170);
    margin: 1%;
    width: 30%;
} 

.square {
    width: 23%;
    height:0;
    padding-bottom: 23%;
    background-color: rgb(121, 120, 117);
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 2%;
    justify-content: center;
    align-items: center;
    font-size: 5vh;
    color: rgb(121, 120, 117);
    color: #fff;
}

h1, h2 {
    text-align: center;
}

<div class="board">
</div>
    
<div class="score">
    <h1>Score:</h1>
    <h2>0</h2>
</div>

在上面的例子中，我还：

从您的 .board 中删除了 height: 370px;，因为它没有随着方块一起增长
为 .squares 添加了底部边距以保持间距均匀
将数字设为白色，这样我就可以验证它们不会影响大小

如何在屏幕宽度变化时使网格中的正方形瓷砖均匀增长和收缩

How to make square tiles in a grid grow and shrink evenly when the screen width changes

css

flexbox

display