javascript - 使用 CSS-Element-Queries 库模拟 CSS 的媒体查询

Question

我用了这个看似花哨的CSS-Element-Queries tool对于每次调整窗口大小时都会启动的一些基本元素操作。

简而言之，我想根据当前窗口宽度更改元素属性的值，即每次以某种方式调整窗口大小时，我都想检查其宽度，然后对某个元素执行某些操作 .

我按照教程中的方式进行了所有操作，但一定是出了什么问题，因为它根本不起作用。这是代码:

<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>

<script>
    new ResizeSensor(jQuery(window), function(){ 
        var a = $(window).width();

        if (a < 1024 && a > 768) {
            $(".slideshow").attr("data-cycle-carousel-visible", 4);
        }
        if (a <= 768 && a > 480) {
            $(".slideshow").attr("data-cycle-carousel-visible", 3);
        }
        if ((a <= 480) && (a > 320)) {
            $(".slideshow").attr("data-cycle-carousel-visible", 2);
        }
        if (a <= 320) {
            $(".slideshow").attr("data-cycle-carousel-visible", 1);
        }
    });
</script>

Answer 1

您需要观察窗口调整大小，然后在调整大小时调用调整器函数。

//watch for resize
 $( window ).resize(function() {
   //call function each time window is resized
   resizr();
 });

 var resizr = new ResizeSensor(jQuery(window), function(){ 
    var a = $(window).width();

    if (a < 1024 && a > 768) {
        $(".slideshow").attr("data-cycle-carousel-visible", 4);
    }
    if (a <= 768 && a > 480) {
        $(".slideshow").attr("data-cycle-carousel-visible", 3);
    }
    if ((a <= 480) && (a > 320)) {
        $(".slideshow").attr("data-cycle-carousel-visible", 2);
    }
    if (a <= 320) {
        $(".slideshow").attr("data-cycle-carousel-visible", 1);
    }
});