Question

我有一个棘手的标题，当我向下滚动时...标题栏，菜单和徽标都较小。但我不希望在移动设备上使用它。如何激活.js仅用于分辨率＆gt; 767px？

$(window).scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 350 )
        $(".top-nav li").css("padding", "20px 15px 0px"),
        $(".logo img").css("margin", "7px 0 0 0"),
        $(".logo img").css("height", "50px");
    else
        $(".top-nav li").css("padding", "30px 15px 10px"),
        $(".logo img").css("margin", "13px 0 0 0"),
        $(".logo img").css("height", "57px");
});

Answer 1

您搜索的是响应式网页设计，不应单独在JS中实现。

在css中实现它，就像这样（仅举例）：

@media(min-device-width: 767px){
  .top-nav li {
    padding: 20px 15px 0px;
  }
}

此致

.js仅对分辨率＆gt; 767px有效

1 个答案: