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

如何解决当屏幕宽度变化时，如何使网格中的正方形瓷砖均匀地生长和收缩

我正在开发一款游戏，游戏板的左侧在左边，得分区在右边。我希望浏览器扩展时，板上的各个图块保持正方形。截至目前，它们沿宽度方向生长，但高度并未增长。

开始设置：

但是在将窗口加宽后，瓷砖变为矩形：

调整浏览器窗口的大小时如何将拼贴保持为正方形？

这是.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函数：

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);
    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,117);
}

h1,h2 {
    text-align: center;
}

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

解决方法

强制使用动态尺寸元素的平方（或任何其他）长宽比是使用纯CSS解决的最困难的问题之一。使用JavaScript来确保board元素的宽/高比保持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';

请注意，当调整窗口大小时，上述代码片段不会再次运行，因此您可能希望将开发板放置在一个容器中，该容器会增大到最大可用空间，并采用最小尺寸并将JS包裹在{ {1}}事件监听器。

,

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

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

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

这是做什么的

• 我们可以将padding-bottom设置为宽度（在这种情况下为23％）以形成正方形
• 将高度设置为0，以使底部填充是唯一增加高度的东西

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

工作段：

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);
    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,117);
    color: #fff;
}

h1,h2 {
    text-align: center;
}

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

在上面的示例中，我还：

• 移除了height: 370px;上的.board，因为它不随正方形而增长
• 为.squares添加了一个底边距，以保持间距均匀
• 将数字设置为白色，以便我确认它们不会影响尺寸