不同屏幕尺寸下Etc-A-Sketch页面显示异常求助

AI 小北

2026-8-9

问题描述

我正在为Odin Project课程开发Etc-A-Sketch游戏，开发阶段在虚拟机中页面显示正常，但上传至GitHub后，在更大屏幕或小窗口运行代码片段时，页面布局出现错乱。目前尚未学习Media Query，希望获取无需使用该技术的修复建议。

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="reset.css">
    <link rel="stylesheet" href="mystyle.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alfa Slab One">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Iceland">
    <title>Etc-A-Sketch</title>
</head>

<body>
    <div class="flex-container">
        <div class="title">
            <h1>Etc-A-Sketch</h1>
        </div>

        <div class="content">

            <div class="left-content">

                <div class="coloring-text">
                  <div class="mode">Mode:&nbsp;</div>
                  <div class="mode-coloring">Coloring</div>
                  <div class="mode-not-coloring"></div>
                </div>

              <div class="buttons">
                  <button onclick="changeColor('black')">Black</button>
                  <button onclick="changeColor('white')">Erasor</button>
                  <button onclick="changeColor('grey')">Gray</button> 
                  <button onclick="changeColor('random')">Random</button>
                  <button id="clear-button" onclick="resetBoard()">Clear</button>
              </div>

              <div class="range-bar-button">
                <div class="range-bar">
                  <input id="new-size" type="range" min="2" max="100" value="16"/>
                  <label id="size-label"></label>
                </div>
    
                  <button id="new-grid">New grid size</button>
              </div>
            </div>
             
              <div class="board"></div>
        </div>
    </div>

    <footer class="footer">
        <p>
            Copyright ©
            <script>
                document.write(new Date().getFullYear())
            </script>
            georgan1987
            <a href="https://github.com/georgan1987"><img src="./GitHub-Mark-32px.png" alt="GitHub Logo" class="git-pic"></a>
        </p>
    
    </footer>
    
</body>
<script src="app.js"></script>
</html>

CSS代码

/* Main Board */
.board{
    display:grid;
    width: 65vh;
    height: 65vh;
    border: 1px rgba(0, 0, 0, 0.404) solid;
    margin-top: 1vh;
    margin-right: 6vh;
    box-sizing: content-box;

}

.div-squares{
    border: 1px rgba(0, 0, 0, 0.041) solid;
    background-color: rgba(255, 255, 255, 1);
}

.div-squares:hover{
    background-color: #1381ad !important;
}

/* Header */
.title{
    display: flex;
    background-color: #31748f;
    justify-content: center;
    align-items: center;
    padding: 25px;
}

h1{
    color: #f25602;
    font-family: "Alfa Slab One";
    font-size: 50px;
    font-weight: 400;
}

body{
    display: flex;
    flex-direction: column;
    background-color: #f3cfbc;
    min-height: 100vh;
}

.content{
    padding: 40px 100px;
    display: flex;
    justify-content: center;
    gap: 200px;
}

.coloring-text{
    display: flex;
    flex-direction: row;
}
/* New Grid Button */
#new-grid{
    display: block;
    background-color: #f25602;
}

#new-grid:hover {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.199);
    background-color: #500d04;
    color: white;
    border: 1px solid #c6c6c6;
    text-decoration: none;
    transition: all .3s ease;
    color: #d9f3ed;
}

#new-grid:active {
    border: 1px solid #300a0a;
    transition: all 0s ease;
    background-color: #7bcfb3;
    color: white;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.199);
}

#new-size{
    width: 16vw;
    margin-bottom: 10px;
}

.left-content{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.mode, .mode-coloring, .mode-not-coloring{
    font-family: "Iceland";
    font-size: 40px;
}

button{
    background-color: #3ba1c9;
    color: rgb(0, 0, 0);
    font-family: "Iceland";
    border-radius: 24px;
    border: 1px solid white;
    font-size: 20px;
    width: 18vw;
    height: 3vh;
}

button:hover {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.199);
    background-color: #042b50;
    border: 1px solid #c6c6c6;
    text-decoration: none;
    transition: all .3s ease;
    color: #d9f3ed;
}

button:active {
    border: 1px solid #300a0a;
    transition: all 0s ease;
    background-color: #7bcfb3;
    color: white;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.199);
}

.buttons{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#clear-button{
    margin-top: 50px;
    background-color: white;
}

#clear-button:hover{
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.199);
    background-color: #042b50;
    border: 1px solid #c6c6c6;
    text-decoration: none;
    transition: all .3s ease;
    color: #d9f3ed;
}

#clear-button:active{
    border: 1px solid #300a0a;
    transition: all 0s ease;
    background-color: #7bcfb3;
    color: black;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.199);
}

.range-bar{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.range-bar-button{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
}

#size-label{
    font-family: "Iceland";
    margin-bottom: 10px;
}


/* Footer */
footer{
    bottom: 0;
    display: flex;
    background: #1381ad;
    color: #f85903;
    font-family: "Iceland";
    font-size: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 20px;
}

.git-pic{
    transition: transform 0.3s ease-in-out;
    height: 17px;
    width: 17px;
}

.git-pic:hover{
    transform: rotate(360deg) scale(1.2);
}

JavaScript代码

let color = "black";
let click = true;

//Populates the Grid
function populateBoard(size){
 let board = document.querySelector(".board");
 board.style.gridTemplateColumns = `repeat(${size}, 1fr)`
 board.style.gridTemplateRows = `repeat(${size}, 1fr)`

 let amount = size*size
 for (i=0; i < amount; i++){
     let square = document.createElement('div');
     square.classList.add('div-squares')
     square.addEventListener('mouseover', colorSquare)
     square.style.backgroundColor = "white";
     board.insertAdjacentElement('beforeend', square);
  }
}

populateBoard(16);

//New grid 
let newGridButton = document.querySelector("#new-grid");
newGridButton.addEventListener('click', function() {
    changeSize(newSize.value);
})

function changeSize(input){
        let squares = document.querySelectorAll("div .div-squares");
        squares.forEach((div) => div.remove());
        populateBoard(input);
}

//Function for RGB colors
function colorSquare() {
    if (click) {
      if(color === 'random') {
          this.style.backgroundColor = `hsl(${Math.random()*360}, 100%, 50%)`
      } else {    
      this.style.backgroundColor = color;
      }
 }
}

//Range bar & display
let newSize = document.querySelector("#new-size");
newSize.value = 16;
let displaySize = document.querySelector("#size-label");
displaySize.textContent = newSize.value;
newSize.addEventListener('mousemove', function() {
    displaySize.textContent = newSize.value
})



function changeColor(choice) {
    color = choice;
}

//Clears the board
function resetBoard(){
    let squares = document.querySelectorAll("div .div-squares");
        squares.forEach((div) => div.style.backgroundColor = "white");
}

//Coloring Mode
document.querySelector('.board').addEventListener("click", (e) => {
    if(e.target.className != "board"){
    click = !click
    if(click){
        document.querySelector(".mode-not-coloring").textContent = "";
        document.querySelector(".mode-coloring").textContent = "Coloring"
    } else {
        document.querySelector(".mode-not-coloring").textContent = "Not Coloring";
        document.querySelector(".mode-coloring").textContent = ""  
    }
  }
});

//Function:Random Color for Coloring mode
let colorText = document.querySelector(".mode-coloring");

function getRandomColor(){
    let letters = '0123456789ABCDEF';
    let colour = '#';
    for (let i=0; i <6; i++) {
        colour += letters[Math.floor(Math.random()*16)];
    }
    return colour;
}

function flashRandomColor(){
    colorText.style.color = getRandomColor();
}

setInterval(flashRandomColor,700);

修复建议

以下是无需使用Media Query的布局修复方案：

1. 优化内容容器的自适应布局

修改.content的CSS属性，让小屏幕下控制面板和画板自动换行，同时调整内边距和间距：

.content{
    padding: 40px 20px; /* 缩小左右内边距，适配小屏幕 */
    display: flex;
    justify-content: center;
    gap: 40px; /* 缩小间距，避免宽屏间距过大 */
    flex-wrap: wrap; /* 小屏幕下自动换行 */
}

2. 替换按钮和滑块的vw单位

用固定宽度结合max-width:100%替代vw单位，确保不同屏幕下控件尺寸合理：

#new-size{
    width: 100%;
    max-width: 260px; /* 限制最大宽度 */
    margin-bottom: 10px;
}

button{
    background-color: #3ba1c9;
    color: rgb(0, 0, 0);
    font-family: "Iceland";
    border-radius: 24px;
    border: 1px solid white;
    font-size: 20px;
    width: 280px; /* 固定宽度 */
    max-width: 100%; /* 小屏幕下自适应 */
    height: 3vh;
}

3. 调整画板的尺寸和位置

去掉固定的右侧margin，添加最大宽高限制，避免画板溢出视口：

.board{
    display:grid;
    width: 65vh;
    height: 65vh;
    border: 1px rgba(0, 0, 0, 0.404) solid;
    margin-top: 1vh;
    box-sizing: content-box;
    max-width: 90vw; /* 宽屏时不超过视口宽度 */
    max-height: 90vw; /* 保持正方形比例 */
}

4. 优化左侧控制面板的对齐

让控件居中对齐，提升不同屏幕下的整齐度：

.left-content{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; /* 控件居中 */
}

.range-bar-button{
    display: flex;
    flex-direction: column;
    align-items: center; /* 滑块和按钮居中 */
}

5. 自适应标题字体大小

用clamp()函数实现字体的自适应缩放，无需媒体查询：

h1{
    color: #f25602;
    font-family: "Alfa Slab One";
    font-size: clamp(2rem, 5vw, 3.125rem); /* 最小2rem，基准5vw，最大3.125rem */
    font-weight: 400;
}

这些修改通过flex布局的换行特性、相对单位结合限制值、自适应字体等方式，在不使用Media Query的前提下，让页面在不同屏幕尺寸下保持合理布局。

内容的提问来源于stack exchange，提问作者georgan1987

不同屏幕尺寸下Etc-A-Sketch页面显示异常求助

HTML代码 #

CSS代码 #

JavaScript代码 #

1. 优化内容容器的自适应布局 #

2. 替换按钮和滑块的vw单位 #

3. 调整画板的尺寸和位置 #

4. 优化左侧控制面板的对齐 #

5. 自适应标题字体大小 #