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

【问题标题】：How to trigger media Queries in javascript for style.width如何在 javascript 中为 style.width 触发媒体查询
【发布时间】：2017-09-03 18:16:05
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery css media-queries viewport-units

【解决方案1】：

在 CSS 中定义 .open 类和 .closed 类，您可以在其中正常使用媒体查询。然后使用 JavaScript 在menuNav 上切换 CSS 类。查看 classList 的文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

【讨论】：

【解决方案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
}

【讨论】：

【解决方案3】：

您可以使用 jQuery 的width() 方法来查找窗口的宽度（IE 浏览器视口）并确定应该使用 50vw 还是 100vw：

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

【讨论】：