如何输入媒体查询，删除顶部的固定横幅并将其替换为移动横幅?

Question

我正在处理一个媒体查询，我想删除桌面的原始横幅(我使用了显示：无;(，并替换为用于移动用途的横幅。 请参考下面的代码：

<div class="headerContainer">
<img class="banner" src="web-banner.gif"/>
<img class="banner-phone" src="phone-img.jpg"/>
<div class="compLogo">

我在输入媒体查询时遇到了一些问题，该查询将删除横幅的固定位置并将其替换为移动位置。 抱歉，如果我跳过了一些东西，我对 Web 开发很陌生。

.headerContainer {
background-color:#000!important;
border-bottom: 0 none;
box-sizing: border-box;
margin: 0 auto;
max-width: 1000px;
padding: 0 1%;
position: fixed;
top: 0;
z-index: 100;
height: 110px!important;

有什么建议吗？

Answer 1

您可以使用两个媒体查询，一个用于设置桌面position:fixed，另一个用于移动设备：

.headerContainer {
background-color:#000!important;
border-bottom: 0 none;
box-sizing: border-box;
margin: 0 auto;
max-width: 1000px;
padding: 0 1%;
top: 0;
z-index: 100;
height: 110px!important;
}
/* media query sizes are only examples */
@media (min-width: 100px) {
.headerContainer {
position: absolute;
}
}
@media (min-width: 1024px) {
.headerContainer {
position: fixed;
}
}

Answer 2

您可以将电话横幅设置为在宽度 = 425px 或更小时显示：阻止，也可以在主横幅上设置 display：none。我已经在mediaquery规则前面添加了.headerContainer，以便这些规则将具有更多的特异性(这意味着它将推翻其他规则(。

@media only screen and (max-width: 425px){
.headerContainer .banner {
display: none;
}
.headerContainer .banner-phone {
display: block;
}
}
.banner {
display: block;
}
.banner-phone {
display: none;
}
.headerContainer {
background-color:#000!important;
border-bottom: 0 none;
box-sizing: border-box;
margin: 0 auto;
max-width: 1000px;
padding: 0 1%;
position: fixed;
top: 0;
z-index: 100;
height: 110px!important;
}