Question

有关使用有效方法调整窗口大小的任何建议吗？我正在做一个响应式导航栏。当小于480px时，通过切换导航以最小化 - 显示设置为隐藏。如果我将屏幕增大到大于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;

Answer 1

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

但是，我建议使用媒体查询，因为它比较高效，可以用纯CSS完成。

运行下面的代码段并点击＆＃34;全屏，＆＃34;然后调整浏览器窗口的大小以查看正在运行的演示。

＆＃13;

/* 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;
  }
}

＆＃13;

<div class="header-li"> </div>

＆＃13;

详细了解Media Queries

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

1 个答案: