Javascript 如何在vanilla js中插入媒体查询？

如何仅在SP视图上运行此javascript

const navTrigger = document.querySelector('.nav__trigger');
const nav = document.querySelector('nav');

navTrigger.addEventListener('click', event => {
    event.preventDefault();
    navTrigger.classList.toggle('nav__trigger--active');
    nav.classList.toggle('nav--open');
    const mediaQuery = window.matchMedia('(min-width: 768px)')
    document.body.classList.toggle('overflow'); // THIS CODE
});

matchMedia（）

查找屏幕宽度是否小于或大于768像素。如果满足条件，则执行代码

const navTrigger = document.querySelector('.nav__trigger');
const nav = document.querySelector('nav');

navTrigger.addEventListener('click', event => {
    event.preventDefault();
    navTrigger.classList.toggle('nav__trigger--active');
    nav.classList.toggle('nav--open');

    if (window.matchMedia("(min-width: 768px)").matches) {
        document.body.classList.toggle('overflow'); // THIS CODE
    }
});

倾听变化 更多示例

---

你的代码没有多大意义。请解释您到底想要什么。您好，只有当媒体的最小宽度为768px（目前您似乎没有使用mediaQuery进行任何操作）时，您才想切换溢出，如果是，您确定要切换溢出还是确实要设置溢出？@Mr_Green document.body.classList.toggle（'overflow'）；此代码应该只在移动视图中工作。它可以工作！非常感谢。document.body.classList.toggle（'overflow'）；此代码只能在移动视图中使用。

// Create a condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')

function handleTabletChange(e) {
  // Check if the media query is true
  if (e.matches) {
    // Then log the following message to the console
    console.log('Media Query Matched!')
  }
}

// Register event listener
mediaQuery.addListener(handleTabletChange)

// Initial check
handleTabletChange(mediaQuery)

// media query event handler
if(matchMedia) {
    const mq = window.matchMedia("(min-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {
    if (mq.matches) {
        // window width is at least 500px
    } else {
        // window width is less than 500px
    }
}