如何用媒体查询替换 div答案

【问题标题】：How to replace div with media queries如何用媒体查询替换 div
【发布时间】：2013-03-26 04:15:29
【问题描述】：

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

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

【问题讨论】：

【解决方案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 的位置或外观。

【讨论】：

【解决方案2】：

HTML

<div id="Box">
    <input type="submit" value="submit" id="submit" class="show" />
    <input type="text" id="text" class="hide" />
</div>

CSS

.show
{
    display:block;
}
.hide
{
    display:none;
}

jquery

$(document).ready(function(){
    $("#Box").dblclick(function(){
        $('#text').toggleClass('show');
        $('#submit').toggleClass('.hide');
    });
});

【讨论】：