禁用 javascript 之类的媒体查询

Question

我有一个旋转我的 div 的脚本，但是当我的屏幕小于 600px 时我想禁用 js，这是旋转 div 的代码：

var form = document.getElementById('survey-form');

form.addEventListener('mousemove', (e) =>{
    var x = (window.innerWidth / 2 - e.pageX) / 200;
    var y = (window.innerHeight / 2 - e.pageY) / 200;

    form.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)'
});

form.addEventListener('mouseleave', function(){
    form.style.transform = 'rotateX(0deg) rotateY(0deg)';
});

我试过这个

$(window).resize(function() {
    if ($(window).width()>600){
    var form = document.getElementById('survey-form');

form.addEventListener('mousemove', (e) =>{
    var x = (window.innerWidth / 2 - e.pageX) / 200;
    var y = (window.innerHeight / 2 - e.pageY) / 200;

    form.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)'
});

form.addEventListener('mouseleave', function(){
    form.style.transform = 'rotateX(0deg) rotateY(0deg)';
});
}

但代码只是停止在所有屏幕上工作。

Answer 1

它停止是因为您正在检查$(window).width()>600 。 这意味着如果屏幕宽度大于600 像素，并且您正在寻找小于600 像素的目标屏幕。 所以只需将这个$(window).width() > 600切换到这个$(window).width() < 600