使用 JavaScript 进行媒体查询

Question

Hey Everyone I want to know that can I use Media Queries with JavaScript and how especially with 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
    })

I want to change duration and translateX when it is viewed in mobile device

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

Thanks

Answer 1

You can check the screen size of the window using screen.width() in your javascript code.

You can store the values of 'translateX' property of anime object in any variable. Then according to the screen size, you can set the values in that variable and ultimately assign the variable as the translateX property.

translateX: <your_variable>