使用 JavaScript 进行媒体查询答案

【问题标题】：Media Queries with JavaScript使用 JavaScript 进行媒体查询
【发布时间】：2018-08-04 04:41:48
【问题描述】：

大家好，我想知道我可以在 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
     })

谢谢

【问题讨论】：

CSS Media Queries - Examples 和 How to Use Media Queries with JavaScript
您如何确定设备是否为移动设备？
我不明白
谢谢 Benvc 我会检查的

标签： javascript jquery web responsive-design anime.js

【解决方案1】：

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

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

translateX: <your_variable>

【讨论】：