Upgrade to Pro — share decks privately, control downloads, hide ads and more …

window.matchMediaの話

kokushin
February 26, 2018

 window.matchMediaの話

Nagoya js @20180225

kokushin

February 26, 2018
Tweet

More Decks by kokushin

Other Decks in Programming

Transcript

  1. // メディアクエリリストの作成 const mql = window.matchMedia('(max-width: 767px)'); // クエリの条件分に従って処理させる const

    handleScaleChange = (mql) => { if (mql.matches) { /* ウィンドウの横幅が767px以下の場合 */ } else { /* ウィンドウの横幅が768px以上の場合 */ } } // メディアクエリリストをリスナに登録 mql.addListener(handleScaleChange); // 初回実⾏ handleScaleChange(mql);
  2. ϝσΟΞΫΤϦͱಉ͡ͳͷͰ… • (min-width: 1000px) and (max-width: 1200px) ͳͲෳࡶͳ ৚݅จ΋ॻ͖΍͍͢ •

    (orientation: portrait) ΍ (orientation: landscape) ͳͲ΋࢖ ͑ΔͷͰॎԣൺͷ൑ผʹ΋༗ޮ