全屏查看時網格顯示分離

Question

我無法理解我創建的網格發生了什么。 我通過 javascript 為網格編寫了一些代碼，當鼠標指針經過它時會更改單元格顏色，但是每當我在全屏 window 中查看此網格時，網格的視圖將變為四個單獨的列。 這只發生在我全屏查看網格時，但是，在任何較小尺寸的 window 中查看網格時，它看起來與您設想的網格完全一樣； 列之間沒有空格。

gridProblem這是網格看起來如何全屏顯示間距問題

網格解決方案這是網格在任何 window 大小超出最大化之外的外觀，以及我希望網格如何 100% 顯示。

以防萬一，這是我正在使用的代碼：

HTML：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Etch N Sketch</title>
</head>
<body>
<div class="container" id="container"></div>
<script src="script.js"></script>
</body>
</html>

Javascript：

const board = document.getElementById("container");
for (x=0; x <= 15; x++) {
    const cell = document.createElement('div');
    cell.className = "cells";
    cell.setAttribute("style", "height: 200px; width: 200px; color: black;");
    cell.style.backgroundColor = "blue";
    cell.style.border = "solid 2px";
    cell.style.borderColor = "black";
    board.style.columnGap = "0px";
    board.style.display ="grid";
    board.style.gridTemplateColumns = "auto auto auto auto";
    board.appendChild(cell);
    cell.addEventListener("mouseover", change = () => 
    cell.style.backgroundColor = "red")
    cell.addEventListener("mouseout", reset = () => cell.style.backgroundColor = "blue")
}

Answer 1

問題是您在這里將寬度和高度設置為絕對值

cell.setAttribute("style", "height: 200px; width: 200px; color: black;");

因此，在較小的屏幕尺寸下，200px 很好，但是一旦正方形需要覆蓋的區域大於 200px，您就可以通過將這些值與它們綁定來限制它們。

全屏查看時網格顯示分離

問題描述

1 個解決方案

解決方案1
0 2022-07-28 18:57:31

全屏查看時網格顯示分離

問題描述

1 個解決方案

解決方案1 0 2022-07-28 18:57:31

解決方案1
0 2022-07-28 18:57:31