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);
    }
});

使用CSS-Element-Queries Library来模拟CSS的媒体查询

1 个答案: