首頁猿問如何在 vanilla js...

如何在 vanilla js 中插入媒體查詢？

JavaScript

鴻蒙傳說 2023-09-07 16:27:12

如何僅在 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});

查看完整描述

2 回答

胡子哥哥

TA貢獻1825條經驗獲得超6個贊

查明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

}

});

反對回復 2023-09-07

肥皂起泡泡

TA貢獻1829條經驗獲得超6個贊

聆聽變化

// 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

}

反對回復 2023-09-07

2 回答
0 關注
127 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 vanilla js 中插入媒體查詢？

如何在 vanilla js 中插入媒體查詢？

2 回答

添加回答

如何在 vanilla js 中插入媒體查詢？

如何在 vanilla js 中插入媒體查詢？