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

-1

我正在处理媒体查询，我希望将桌面原始横幅删除（我已使用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;

有什么建议吗？

来源

2017-08-23 Xhizors48

您可以随时有2个横幅，并且使用媒体查询更改其各自的“display：”属性。如果您先移动手机，则可以在正常横幅上显示移动横幅div上的'display：block'和'display：none'，并且当屏幕大小更改时只更改显示属性。这很容易 –

你有什么问题，你正在尝试的媒体查询在哪里......请使用codepen或jsfiddle添加代码示例并正确定义你的问题。 –

，可以使用两个媒体查询，一个设置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; 
    } 
}

来源

2017-08-23 15:20:10

可以将手机横幅设置为显示：块每当宽度= 425px或更小，并且还设置显示：主横幅上没有显示。我已经将.headerContainer预先添加到mediaquery规则中，以便这些规则具有更多的特定性（这意味着它将否决其他规则）。

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

来源

2017-08-23 15:25:27

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

回答

相关问题