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

Question

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

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/

注意：在小提琴调整大小是滑动包含窗口的持有人。

Answer 2

我的一些建议是使用多个样式表的@media 查询（它们根据屏幕大小应用不同的 css）或应用 java-script 或 java-script 库。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Answer 3

你应该试试这段代码：

 $(window).resize(function() {

      if ($(this).width() < 1024) {
        $('.div').hide();
      } else {
        $('.divNew').show();
      }

});

使用此代码，您可以根据宽度隐藏 div。

Answer 4

为什么不使用媒体查询？

http://en.wikipedia.org/wiki/Media_queries

它们旨在处理此类情况。