如何在 javascript 中为 style.width 触发媒体查询

Question

我正在使用 jquery 处理 onclick 事件 (html)。在我的 jquery 中，我设置了此事件的宽度。

虽然我想要移动网站的不同宽度。为此，我应该使用媒体查询。在桌面上它是 50vw，在 phone（从 600px 触发）它应该是 100vw... 虽然如何使它正常工作？

function openMenu() {
document.getElementById("menuNav").style.width = "50vw"; 
}

function closeMenu() {
    document.getElementById("menuNav").style.width = "0vh";
}

Answer 1

在CSS中定义.openclass和.closedclass即可正常使用媒体查询。然后在 menuNav 和 JavaScript 上切换 CSS classes。请参阅 class 列表的文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 2

if($(window).width() < 601) { 
    // change functionality for smaller screens
} else { 
    // change functionality for larger screens
}e

或

if(window.matchMedia('(max-width: 600px)').matches)
{
    // do functionality on screens smaller than 600px
}

Answer 3

您可以使用 jQuery 的 width() 方法找到 window 的宽度（即浏览器视口）并确定应该使用 50vw 还是 100vw:

function openMenu() {
    if($(window).width() > 600) {
        document.getElementById("menuNav").style.width = "50vw";
    } else {
        document.getElementById("menuNav").style.width = "100vw"; 
    }
}

如何在 javascript 中为 style.width 触发媒体查询

How to trigger media Queries in javascript for style.width

javascript

jquery

css

media-queries

viewport-units