使用窗口调整大小的响应式导航栏

【问题标题】：Responsive navigation bar using window resize使用窗口调整大小的响应式导航栏
【发布时间】：2017-07-12 00:58:58
【问题描述】：

关于使用有效的方法调整窗口大小有什么建议吗？我正在做一个响应式导航栏。当小于 480 像素时，通过切换导航以最小化 - 显示设置为隐藏。如果我将屏幕扩大到大于 480，导航将保持在隐藏状态。为了解决这个问题，我添加了一个窗口调整大小功能，只要屏幕大于 480，列表就会恢复到其初始值。我觉得这可以大大改进，并且浪费了很多性能。

<div class = "dropdown">
        <div class = "icon">
            <img src ="menu.png" class = "text" align = "right">
        </div>
        <ul class = "header-li"> 
            <li><a href ="#1">1</a></li>
            <li><a href ="#2">2</a></li>
            <li><a href="#3">3</a></li>
            <li><a href="#4">4</a></li>
        </ul>
    </div>  


$(".icon").click(function(){
    $(".header-li", ".dropdown").slideToggle(); 
});


$(window).on('resize',function(event){
    var windowSize = $(this).width();

    if (windowSize > 480){
        $(".header-li").css('display','');
    }
}); 

Media query max 480px

display icon
list display:none;

【问题讨论】：

标签： jquery css

【解决方案1】：

您对window.resize 的使用是正确的，但是，您还需要添加一个else 条件，以便在窗口缩小后替换样式。

但是，我建议为此使用媒体查询，因为相比之下它更有效，并且可以使用纯 CSS 完成。

运行下面的 sn-p 并单击“全屏”，然后调整浏览器窗口的大小以查看实际演示。

/* The default view (in this case, for mobile) */
.header-li {
  background: red;
  width: 50px;
  height: 50px;
}

/* When the window is greater than 480px wide */
@media only screen and (min-width: 480px) {
  .header-li {
    background:green;
  }
}

&lt;div class="header-li"&gt; &lt;/div&gt;

了解更多关于Media Queries

【讨论】：