如何仅在特定媒体查询条件下显示网站Logo？

我正在制作响应式网站，导航菜单会在特定屏幕宽度下收纳进汉堡菜单，菜单内包含各版块的<a>标签。现在需要实现：仅当屏幕最大宽度为375px时显示class为"logo"的元素，桌面版本隐藏该Logo。

现有导航HTML结构 #

<div class="navigation">
    <div class="logo">
        <img src="images/LOGO.png" alt="">
    </div>
    <a href="#main">Home</a>
    <a href="#about">About</a>
    <a href="#skills">Roadmap</a>
    <a href="#gallery">Gallery</a>
    <a href="#work">Team</a>
    <a href="#contact">Contact</a>
</div>

现有媒体查询CSS代码 #

@media (max-width:375px) {
    .animated-text h3{
        font-size:0.5em;
    }

    .brand{
        display: none;
    }

    .menu-btn{
        margin-right: 4px;
    }

    .about .content .col-right {
        
        width: 100%;
    }

    .about .content .col-left{
        position:relative;
        width: 100%;
    }

    .about .content .col-right .paragraph-text {
        font-size: 0.8em;
    }

    .skills .content .col-left p{
        font-size: 0.8em;
    }  

    .skills .content .col-right .bar .info {
        font-size: 11px;
        
    }

    .skills .content .content-title{
        position: relative;
        width: 100%;
    }

    .contact .content .row .card{
        margin-bottom: 15px;

    }

    .contact .content .row .card .contact-icon {
        font-size: 2em;
    }

    .about .content .col-left .img-card img {
        object-fit: contain;
    }

    .about .content .col-right {
        margin-top: -160px;
    }

    .about .content .col-left .img-card img {
        top:-50px;
    }
        
}

现有响应式导航JS代码 #

//Javascript Responsive nav
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
const navigationItems = document.querySelectorAll(".navigation a");

menuBtn.addEventListener('click', () =>{
    menuBtn.classList.toggle('active');
    navigation.classList.toggle('active');
});

navigationItems.forEach((navigationItem) => {
    navigationItem.addEventListener("click", () => {
        menuBtn.classList.remove("active");
        navigation.classList.remove("active");
    });
});

解决方案 #

只需两步修改CSS即可实现需求：

1. 全局隐藏Logo：在媒体查询代码之外添加基础样式，让桌面版默认隐藏Logo：

.logo {
    display: none;
}

2. 移动端显示Logo：在@media (max-width:375px)的媒体查询代码块中，添加显示Logo的样式：

.logo {
    display: block; /* 若Logo容器需flex布局，可替换为display:flex，根据实际布局调整 */
}

设置完成后，屏幕宽度大于375px时Logo会自动隐藏；当屏幕宽度≤375px时Logo正常显示，且与汉堡菜单的交互逻辑互不冲突。

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