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

i am looking to apply media queries through javascript

本文关键字：媒体 查询 应用 JavaScript 我希望      更新时间：2023-09-26

我想从左向右滑动菜单的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 });
}

我也尝试过使用开关盒：

        $(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
    }

});

这样做，幻灯片项目根本不出现在屏幕上

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

它返回一个"媒体查询列表"，您必须在其上访问 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');
});

或类似的东西。

相关文章：