如何用媒体查询替换div

Question

我目前正在为我的响应式网站设计搜索框，但由于设计原因，单击扩展搜索框不适合特定区域。所以，我想让这个搜索框被另一个按钮替换，然后在不同的地方显示一个搜索框。

如何用媒体查询或 jquery 替换 div？

Answer 1

您可以这样做：

HTML 和 JavaScript ：

  <div id=a>a</div>
  <button id=b>BUT</button>
  <script>
    $('#b').click(function(){$('#a').show()})
  </script>

CSS :

@media (max-height: 500px) {
   #a {
     display: none;  
   }
}
@media (min-height: 500px) {
   #b {
     display: none;  
   }
}

示范

如果您降低窗口的高度，#a则隐藏 div。但是单击按钮会显示它。使用媒体查询，您还可以针对不同尺寸调整 div 的位置或外观。