jquery - 根据屏幕大小删除 CSS 类 jQuery

Question

我有一个附加到图像元素的选择器，它为图像提供放大镜的功能。我需要删除选择器，这样它就不再启动放大镜，然后根据屏幕尺寸重新添加它。因此，例如，当在移动屏幕上访问时，我希望删除该类。如果屏幕尺寸向上调整 480px，那么我想重新添加该类。解决这个问题的最好、最有效的方法是什么？感谢您的帮助。

Answer 1

如果您不介意 jQuery，一个简单的示例可能会解决问题:

CSS:

.red{
background:red;
}

.yellow{
background:yellow;
}

HTML:

<div style="width:300px; height:100px;" class="yellow"></div>

jQuery:

$(function(){

$(window).bind("resize",function(){
    console.log($(this).width())
    if($(this).width() <500){
    $('div').removeClass('yellow').addClass('red')
    }
    else{
    $('div').removeClass('red').addClass('yellow')
    }
})
})

每当您调整包含窗口的大小时，这将更改 div 元素的颜色。

参见 fiddle :http://jsfiddle.net/6v7GE/

注意:在 fiddle 中调整大小是滑动包含窗口的支架。