在给定特定宽度范围的情况下使用jquery更改类名(媒体查询)

Question

我有以下我想修改的HTML:

<div class="col1 width8"><img src="images/entity.jpg"></div>

我想使用媒体查询,但我不想修改css,而是将类名从width8替换为width6.以下标准媒体查询通常无法实现此目的:

@media only screen and (min-width: 1240px) and (max-width: 1484px) { }

我希望使用jquery删除类,并在窗口介于1240和1484px之间时添加一个类.你可以帮助我使用jquery替代媒体查询来修改内联类和id名称吗？

这是我的jquery

 $(document).ready(function() { 
    $(window).resize(function(){
            var width = $(window).width();

            if(width >= 1240 && width <= 1484){
                $('#info').removeClass('col9').addClass('col8');
            }
            else if(width >= 1485 && width <= 1788){
                $('#info').removeClass('col8').addClass('col7');
            }

            else if(width >= 1789 && width <= 2237){
                $('#info').removeClass('col7').addClass('col6');
            }

            else if(width >= 2238 && width <= 3000){
                $('#info').removeClass('col7').addClass('col6');
            }
            else{
                $('#info').removeClass('col8').addClass('col9');
             }
            })

.resize();

    });

Answer 1

你可以试试这个.

$(window).resize(function(){
   console.log('resize called');
   var width = $(window).width();
   if(width >= 700 && width <= 900){
       $('#myelement').removeClass('width8').addClass('width6');
   }
   else{
       $('#myelement').removeClass('width6').addClass('width8');
   }
})
.resize();//trigger the resize event on page load.

Answer 2

看看enquire.js

它是一个无依赖库,允许您使用JavaScript响应媒体查询.

例如:

var $info = $('#info');

enquire.register("screen and (min-width: 1240px) and (max-width: 1484px)", {
    match: function() {
        $info.addClass('col8');
    },

    unmatch: function() {
        $info.removeClass('col8');
    }
}).listen();

然后,您可以简单地为站点中的各个断点注册媒体查询,以便在成功匹配后添加和删除类.