Question

我正在构建一个响应式布局，并使用一些jQuery插件，如Tabs，Drop菜单，滚动到顶部等，我正在努力的一件事是，一旦浏览器处于它的最小位置如何带走jQuery魔术？

目前在较小的视图中效果看起来很糟糕，所以如果你不介意的话，我只想找几个指针或代码示例。

e.g。如果有一个jQuery IF浏览器视点是=＆lt; 320px然后不运行等？

我在发布之前先做了一些研究，希望专家可以提供帮助。

Answer 1

一种方法是尝试在$(window).resize事件中包装宽度条件：

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() <= 320) {
         // Leave empty
      }
      else {
        // Rest of your jQuery code can go here
      }
   });
});

Answer 2

$(window).resize(function(){
    var h = $(window).height();
    var w = $(window).width();

    if(w <= 320) {
         // Run your script
    }
});

但我建议您使用CSS3 media queries来构建自适应网页设计。

媒体查询由媒体类型和至少一个表达式组成这限制了样式表＆＃39;范围通过使用媒体功能，如宽度，高度和颜色。在CSS3中添加了媒体查询内容的呈现可以根据特定的输出范围进行调整设备无需自行更改内容。

例如：

@media only screen and (max-width : 320px) {
    /* Your styles here */
}

如果浏览器是一定的大小，删除jQuery效果？

2 个答案: