点击.category后.gameStarted无法显示及两张img半宽适配问题求助

一、点击.category按钮后.gameStarted无法显示的问题 #

错误原因 #

1. 代码中执行了document.body.style.display = "none";，这会直接隐藏整个<body>元素，而.gameStarted作为<body>的子元素，自然无法被渲染显示。
2. 变量mainPage的获取语法错误：getElementById不需要添加.前缀，目标元素的id是main-page，而非类选择器。

修复方案 #

移除隐藏整个body的代码，改为仅隐藏主页面相关元素；同时修正mainPage的获取逻辑。

修改后的JavaScript关键片段：

document.addEventListener("DOMContentLoaded", function () {
    const playButton = document.querySelector(".play");
    const popup = document.getElementById("popup");
    const closePopupButton = document.getElementById("close-popup");
    const categoryButtons = document.querySelectorAll(".category");
    const gameStarted = document.querySelector(".gameStarted"); 
    const mainPage = document.getElementById("main-page"); // 移除前缀的`.`

    // ... 其他原有逻辑保持不变

    categoryButtons.forEach(function (button) {
        button.addEventListener("click", function () {
            popup.style.display = "none";
            // 仅隐藏主页面区域，而非整个body
            mainPage.style.display = "none";
            document.querySelector(".main").style.display = "none";
            // 显示游戏界面
            gameStarted.style.display = "block";
        });
    });
});

额外优化：调整.gameStarted的CSS，避免内部元素重叠：

.gameStarted {
    display: none;
    position: relative;
    width: 100%;
    height: 100vh;
}

.vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.more {
    position: absolute;
    top: 80%;
    left: 25%;
    transform: translate(-50%, -50%);
}

.less {
    position: absolute;
    top: 80%;
    right: 25%;
    transform: translate(50%, -50%);
}

二、设置两张img元素为半宽适配屏幕 #

假设.gameStarted内的图片结构如下：

<div class="gameStarted">
    <img src="image1.jpg" alt="Item 1" class="game-image">
    <img src="image2.jpg" alt="Item 2" class="game-image">
    <h2 class="vs">VS</h2>
    <h3 class="more">More</h3>
    <h3 class="less">Less</h3>
</div>

方案1：Flex布局实现 #

.gameStarted {
    display: none;
    position: relative;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    gap: 2rem; /* 图片间的间距 */
    padding: 0 1rem;
}

.game-image {
    width: 45%; /* 用45%而非50%，预留间距 */
    max-width: 500px; /* 限制大屏下图片最大宽度 */
    height: auto; /* 保持图片比例 */
    object-fit: cover; /* 可选：填充容器且不变形 */
}

/* 移动端适配：小屏切换为垂直布局 */
@media (max-width: 768px) {
    .gameStarted {
        flex-direction: column;
    }
    .game-image {
        width: 90%;
    }
}

方案2：Grid布局实现 #

.gameStarted {
    display: none;
    position: relative;
    width: 100%;
    height: 100vh;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 1rem;
    align-items: center;
}

.game-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .gameStarted {
        grid-template-columns: 1fr;
    }
}

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