jquery，窗口宽度变化时添加/删除类答案

【问题标题】：jquery, add/remove class when window width changesjquery，窗口宽度变化时添加/删除类
【发布时间】：2012-06-15 08:56:14
【问题描述】：

我编写了一个非常基本的脚本，用于在加载或调整窗口大小时添加/删除类。

我只是想知道是否有更好的方法来做到这一点，或者是否可以减少代码行数。

基本上，当在较小的屏幕上查看网站时，我希望能够更改样式。我认为最好在 html 标签低于一定宽度时添加一个新类...

这是我的代码。

<script type="text/javascript">
 $(document).ready( function() {
    /* Check width on page load*/
    if ( $(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {}
 });

 $(window).resize(function() {
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
 });

谢谢

阿娇

【问题讨论】：

其中一个选项是使用媒体查询

标签： jquery

【解决方案1】：

好吧，我知道我参加聚会迟到了，但我看到了一些像 $(document).ready() 这样的东西，实际上并没有必要。

如果您一遍又一遍地调用选择器，请尝试缓存它们，例如var $window = $(window); 这将有助于提高性能。我使用函数表达式进行封装，以使我不在全局范围内，但仍然可以访问我的 $window 和 $html 缓存的 jQuery 选定元素。

(function($) {
    var $window = $(window),
        $html = $('html');

    $window.resize(function resize(){
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }).trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/1

可能更简洁一些，更容易理解：

(function($) {
    var $window = $(window),
        $html = $('html');

    function resize() {
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }

    $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/2

【讨论】：

一个好答案的例子:)
可能在这里打赌答案！
这是一个非常棒的答案——非常感谢你，Jared！
迟到总比不到好！这是一个很好的解决方案。

【解决方案2】：

使用媒体类

@media screen and (max-width: 900px) {
  .class {
    width:800px;

  }
}

@media screen and (max-width: 500px) {
      .class {
        width:450px;

  }
}

【讨论】：

我真的很喜欢这个解决方案，简短而简单！
我无法解释为什么，我只是从未学会信任@media 查询。
但你必须有充分的理由说服自己否则

【解决方案3】：

首先，使用函数干燥（不要重复自己）你的代码：

function checkWidth(init)
{
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
        $('html').addClass('mobile');
    }
    else {
        if (!init) {
            $('html').removeClass('mobile');
        }
    }
}

$(document).ready(function() {
    checkWidth(true);

    $(window).resize(function() {
        checkWidth(false);
    });
});

【讨论】：

你并不真的需要$(document).ready() 和window 对象，无论如何你的checkWidth() 函数可以进入你设置$(window).resize() 处理程序的地方。如果您以后需要在范围之外调用它，您可以随时$(window).resize()。
恕我直言，我认为您确实需要$(document).ready()，因为在移动设备上，它在第一次加载时无法正常工作。这只是我的经验，所以持保留态度！

【解决方案4】：

function resize() {
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
}

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});

【讨论】：

出于某种原因，这是唯一一个对我来说效果很好的。谢谢！

【解决方案5】：

你也可以使用这个方法我认为它很清楚：

$(window).on('resize', function(){
      var win = $(this);
      if (win.width() < 514) { 

      $('html').addClass('mobile');

      }
    else
    {
        $('html').removeClass('mobile');
    }

});

Simple Method

【讨论】：

应该注意，这只会在调整大小时添加一个类，而不是在初始页面加载时添加一个类

【解决方案6】：

实际上，这个问题困扰了我一段时间。我通常有多种尺寸的过渡。我写了这个我想分享的想法：

$(function() {
  var pageTransitions = [['full',1600],['mobile',800],['tiny',400],['micro',0]]; // number shows minimum size - must be from high to low
  function resize() {
    var target = 0,
        w = $(window).width(),
        h = $('html');
    $.each(pageTransitions, function(index, pageTransition) {
        if( w > pageTransition[1]) {
            target = index;
            return false;
        }
    });
    $.each(pageTransitions, function(index, pageTransition) {
        h.removeClass(pageTransition[0]);
    });
    h.addClass(pageTransitions[target][0]);
  }
  resize();
  jQuery(window).on('resize', function() {
    resize();
  });
});

http://jsfiddle.net/mckinleymedia/ERZ3q/7/

【讨论】：

【解决方案7】：

试试这个。它对我有用

function resize() {
        if ($(window).width() < 514) {}
        else {}
    }

    $(document).ready( function() {
        $(window).resize(resize);
        resize();
    });

【讨论】：