第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

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

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

鴻蒙傳說 2023-09-07 16:27:12
如何僅在 SP 視圖上運(yùn)行此 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貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊

查明matchMedia()屏幕寬度是否小于或大于 768 像素。如果滿足條件則執(zhí)行代碼


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

    }

});


查看完整回答
反對 回復(fù) 2023-09-07
?
肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

聆聽變化

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

    }

}


查看完整回答
反對 回復(fù) 2023-09-07
  • 2 回答
  • 0 關(guān)注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號