window.matchMediaの話

Nagoya js @20180225

1. window.matchMediaͷ࿩ ɹ@kokushing
2. window.matchMedia ஌ͬͯ·͔͢ʁ
3. ͳʹͦΕ • CSSͷϝσΟΞΫΤϦʢͱಉ͡هड़ʣΛJSͰ΋࢖͑Δ windowΦϒδΣΫτͷϝιου • ΢Οϯυ΢ͷ෯ɾߴ͕͞ΫΤϦͷ৚݅จͱҰக͢Ε͹ matchesϓϩύςΟ͕tureΛฦ͢ • addListenerϝιουΛݺͼग़͢͜ͱͰϦεφΛొ࿥͠ɺɹ resizeΠϕϯτͷΑ͏ʹαΠζมߋΛݕ஌͢Δ͜ͱ΋Մೳ • IE10Ҏ্Ͱಈ͘
5. ࣮ࡍͷσϞ https://kokushin.github.io/matchMedia/
6. // メディアクエリリストの作成 const mql = window.matchMedia('(max-width: 767px)'); // クエリの条件分に従って処理させる const handleScaleChange = (mql) => { if (mql.matches) { /* ウィンドウの横幅が767px以下の場合 */ } else { /* ウィンドウの横幅が768px以上の場合 */ } } // メディアクエリリストをリスナに登録 mql.addListener(handleScaleChange); // 初回実⾏ handleScaleChange(mql);
7. ϝϦοτ • CSSͷϝσΟΞΫΤϦͱಉ͡هड़ͳͷͰ৚݅จ͕ཧղ͠΍ ͍͢ = ಋೖίετ΋௿Ί • ৚݅จͱҰகͨ͠ͱ͖ʹҰ౓͚ͩॲཧ͞ΕΔͷͰonresize ΠϕϯτൃՐ࣌ͷແବͳϑϥά؅ཧΛ͢Δඞཁ΋ͳ͍ let changeFlag = false; if (!changeFlag) { /* ウィンドウサイズが変わったときの処理 */ changeFlag = true; }
8. ϝσΟΞΫΤϦͱಉ͡ͳͷͰ… • (min-width: 1000px) and (max-width: 1200px) ͳͲෳࡶͳ ৚݅จ΋ॻ͖΍͍͢ • (orientation: portrait) ΍ (orientation: landscape) ͳͲ΋࢖ ͑ΔͷͰॎԣൺͷ൑ผʹ΋༗ޮ
9. YES! matchMedia
10. window.matchMedia - Web API ΠϯλʔϑΣΠε | MDN https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia
11. εΫϦϓτ͔ΒͷϝσΟΞΫΤϦͷ࢖༻ | MDN https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Testing_media_queries
12. એ఻࿮ https://www.makepost.net/