jquery - 如何用媒体查询替换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;  
   }
}

Demonstration

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