我希望通过 javascript 应用媒体查询

Question

我想从左向右滑动菜单的div，我用javascript

做到了

     <div id="script" style="height: 250px;">
                <div class="slide">
                    <div id="div1" class="slide-item">
                        <p>Home</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="div2" class="slide-item">
                        <p>About Us</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="div3" class="slide-item">
                        <p>Events</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="div4" class="slide-item">
                        <p>Register</p>
                    </div>

                </div>

            </div>

但是我不能用不同的媒体屏幕来做我试过这个：

   document.ready(function () {

if (screen.width <= 450) {
    $("#div1").animate({ left: '100px' }, { duration: 500 });

}
else if (screen.width >= 451 && screen.width <= 700) {
    $("#div1").animate({ left: '150px' }, { duration: 500 });
}
else (screen.width > 700)
{
    $("#div1").animate({ left: '200px' }, { duration: 500 });
}

我也尝试过使用 switch case:

        $(document).ready(function () {
    switch ( varmql) {
        case window.matchMedia("screen and (min-width: 450px)"):
            $("#div1").animate({ left: '60px' }, { duration: 500 });

            break;
        case window.matchMedia("screen and (min-width: 451px) and (max-width:540px)"):
            $("#div1").animate({ left: '80px' }, { duration: 500 });

            break;

        case window.matchMedia("screen and (min-width: 541px) and (max-width:768px)"):
            $("#div1").animate({ left: '100px' }, { duration: 500 });

            break;

        case window.matchMedia("screen and (min-width: 769px) and (max-width:1024px)"):
            $("#div1").animate({ left: '140px' }, { duration: 500 });

            break;
        case window.matchMedia("screen and (min-width: 1025px) and (max-width:1200px)"):
            $("#div1").animate({ left: '160px' }, { duration: 500 });

            break;
        case window.matchMedia("screen and (min-width: 1201px) "):
            $("#div1").animate({ left: '180px' }, { duration: 500 });
        default

    }


});

执行此操作时，幻灯片项目根本不会出现在屏幕上

Answer 1

在 https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia 查看 matchMedia 的文档。

它 returns 一个 "media query list" 你必须访问 matches 属性:

case window.matchMedia("screen and (min-width: 450px)").matches:
                                                       ^^^^^^^^

我不知道 varmql 是什么，但您似乎应该将其替换为 true。

但正如评论者所提到的，您可能根本不需要这样做。您可以将 CSS 与媒体查询一起使用：

#div1 { transition: all 500ms; }

@media screen and (min-width: 450px) {
    #div1 .animate { left: 60px; }
}

$(document).ready(function() {
    $('#div1').addClass('animate');
});

或类似的东西。

我希望通过 javascript 应用媒体查询

i am looking to apply media queries through javascript

javascript

media-queries