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/

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

Answer 2

我想要的一些建议是@media Queries使用多个样式表（它们根据屏幕大小应用不同的css）或者应用java脚本或java脚本库。

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

它们旨在处理这种情况。

根据屏幕大小jQuery删除CSS类

4 个答案: