根据屏幕大小jQuery删除CSS类

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元素的颜色.

看小提琴:http://jsfiddle.net/6v7GE/

注意:小提琴调整大小是滑动包含窗口的支架.