我想问我如何使我的网格始终保持不变(一个大的正方形，只有不同数量的小正方形在里面)。您可以通过在提示符中输入数字来更改的小方格数。例如，将其从默认的16更改为64，会以一种可怕的方式调整其大小。我想它可能与CSS有关，但我在这里迷路了。请看看这个JSFiddle并指导我。
链接。
<script async src="//jsfiddle.net/MicSparrow/0q8ycvgr/embed/"></script>
提前感谢您的帮助。
如果你想保持框的宽度和高度，因为他们现在:25px，你可以考虑任何方法来防止行断行，
示例:通过将white-space: pre;加入.row
在这种方法中，内容可能会超过文档宽度，并且页面将可以水平滚动
如果你想根据大小动态设置宽度和高度，你可以更新你的代码，这样在选择网格大小之后，你需要通过除以container-width/grid-size
来计算宽度/高度值第一个问题是HTML不包含边框作为框的整体宽度和高度。因此，要在CSS中覆盖它，我们可以在示例中执行box-sizing: border-box。
另一个小的CSS技巧是网格中间的边界将是双的，外部是单的。为了解决这个问题，我们可以为所有的方框添加border-left和border-bottom，并在每一行的第一行添加border-top，在最后一个方框添加border-right
现在，设置好了，让我们设置max-width(&高度(如果你想改变高度)在Javascript中设置为400。
我们可以根据容器中盒子的数量来设置盒子的宽度和高度，这样总共就有400个。
好运
const gridContainer = document.querySelector("#grid-container");
const magicButton = document.querySelector("#magic-button");
const gameReset = document.querySelector("#game-reset");
const maxWidth = 400;
window.addEventListener('load', makeBlocks);
let size = 16;
function makeBlocks() {
for (let i = 0; i < size; i++) {
let row = document.createElement('div');
row.className = "row";
for (let j = 0; j < size; j++) {
let box = document.createElement('div');
box.className = "box";
row.appendChild(box);
}
document.getElementById('grid-container').appendChild(row);
gridContainer.addEventListener("mouseover", changeColor);
var boxes = document.getElementsByClassName("box");
for (k = 0; k < boxes.length; k++) {
boxes[k].style.width = maxWidth / size + "px";
boxes[k].style.height = maxWidth / size + "px";
}
}
}
function changeColor(e) {
const Color1 = Math.floor(Math.random() * 256);
const Color2 = Math.floor(Math.random() * 256);
const Color3 = Math.floor(Math.random() * 256);
e.target.style.backgroundColor = `rgb(${Color1}, ${Color2}, ${Color3})`;
}
magicButton.addEventListener("click", changeSize);
function changeSize() {
let newSize = prompt("Enter desired grid size from 1 to 100");
let desiredValue = parseInt(newSize);
if (desiredValue > 1 && desiredValue <= 100) {
size = newSize;
clearGrid();
makeBlocks();
} else {
alert("Enter a digit from 1-100 range!");
}
}
function clearGrid() {
const gridArray = Array.from(gridContainer.childNodes);
gridArray.forEach((element) => {
gridContainer.removeChild(element);
});
}
function resetGame() {
gameReset.addEventListener('click', () =>
location.reload());
}
resetGame();body {
text-align: center;
}
h1 {
font-family: arial, monospace;
font-size: 70px;
color: black;
}
button {
background-color: #99e6ff;
border: solid black;
border-width: 1px;
color: #000000;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#grid-container {
display: inline-block;
}
.box {
background: #ffffff;
border-left: #000000 1px solid;
border-bottom: #000000 1px solid;
display: inline-block;
box-sizing: border-box;
}
.row {
display: block;
width: 100%;
font-size: 0;
}
.row:first-child {
border-top: #000000 1px solid;
}
.row .box:last-child {
border-right: #000000 1px solid;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Etch-a-sketch</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Etch-a-sketch</h1>
</header>
<div class="main-container">
<div class="magic">
<button id="magic-button">Change size</button>
<button id="game-reset">Reset game</button>
</div>
<br>
<div id="grid-container"></div>
</div>
<script src="script.js"></script>
</body>
</html>