Question

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

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

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

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

Answer 1

在CSS中定义.open类和.closed类，您可以正常使用媒体查询。然后使用JavaScript在menuNav上切换CSS类。请参阅classList的文档：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()方法查找窗口的宽度（IE浏览器视口）并确定是否应使用50vw或100vw：

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

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

3 个答案: