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

Question

我正在处理一个媒体查询，我想删除桌面的原始横幅(我使用了 display: none;)，并替换为移动使用的横幅。 请引用以下代码:

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