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

Question

这个问题在这里已经有了答案:





CSS grid square layout [duplicate]

(4 个回答)


去年关闭。




我正在构建一个游戏，它的左边是棋盘，右边是得分区。当浏览器展开时，我希望板上的各个图块保持正方形。截至目前，它们在宽度方向上增长，但在高度上没有增长。
开始设置:

但是在使窗口变宽后，瓷砖变成矩形:

调整浏览器窗口大小时，如何将图块保持为正方形？
这是 .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, 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

要在响应式设计中保持纵横比，请使用相同的 height如 width不像你看到的那样工作。高度取决于具有明确高度设置的包含块，但在响应式网格中，我们不需要固定高度。
相反，您可以使用填充，因为它将以与宽度相同的方式计算容器的百分比。您可以更改 .square类到这个:

.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>

在上面的例子中，我还:

删除了 height: 370px;您的 .board因为它没有随正方形一起增长

为 .squares 添加了底部边距保持间距均匀

将数字设为白色，以便我可以验证它们不会影响大小