如何仅为某个媒体查询显示图像

Question

我正在尝试让我的网站响应，当我达到一定的媒体查询宽度时，我的导航菜单在hamburguer菜单中，在那里我有不同部分的所有<a>标签。现在我只想显示这个媒体查询的标志，而不是桌面版本。

这是我的导航菜单

<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>

所以我想用类"隐藏div；徽标"；除非宽度的最大值为375px：

@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");
});
});

Answer 1

这里有一个显示特定尺寸徽标的示例(如果是width<375px，则显示徽标(

您可以使用display: none为img 设置默认样式

然后，您可以在媒体查询display: block中使用以下CSS

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

.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;
}

}

<div class="navigation">
<div class="logo">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" 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>