使用JavaScript进行媒体查询

Question

大家好，我想知道我可以在JavaScript中使用媒体查询，以及如何使用，特别是在Animejs中。

    var morphing = anime({
        targets: '.polymorph',
        points: [{
            value: '405,219 0,219 0,0 70,0 77.5,0 84,0 151.5,154.5'
        }, ],
        easing: 'easeOutQuad',
        duration: 1500,
        loop: false
    });

    anime({
        targets: '#blip',
        opacity: 1,
        duration: 7000,
        translateX: 290,
        loop: true
    })

我想更改在移动设备中查看时的持续时间和translateX

        anime ({
        targets: '#blip',
        opacity: 1,
        duration: 7000,
        translateX: 290,
        loop: true
     })

谢谢

Answer 1

您可以在javascript代码中使用screen.width()检查窗口的屏幕大小。

您可以将动画对象的'translateX‘属性的值存储在任何变量中。然后根据屏幕大小，您可以设置该变量中的值，并最终将该变量指定为translateX属性。

translateX: <your_variable>