Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
window.matchMediaの話
Search
kokushin
February 26, 2018
Programming
1
170
window.matchMediaの話
Nagoya js @20180225
kokushin
February 26, 2018
Tweet
Share
More Decks by kokushin
See All by kokushin
趣味全開のAITuber開発
kokushin
0
540
AI彼女とペアプロする話
kokushin
2
510
AI彼女の感情制御を頑張る話
kokushin
3
850
サイト制作における、より効果的な演出テクニックとは?
kokushin
1
110
Other Decks in Programming
See All in Programming
テスト環境にCDを導入してみた
yasaigaoisi
0
100
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
AIのメモリー
watany
7
510
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
階層化自動テストで開発に機動力を
ickx
1
380
構文解析器入門
ydah
7
1.7k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
39
14k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
140
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
270
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
210
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.2k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
The Language of Interfaces
destraynor
158
25k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building Adaptive Systems
keathley
43
2.7k
Done Done
chrislema
184
16k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fireside Chat
paigeccino
37
3.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Thoughts on Productivity
jonyablonski
69
4.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Transcript
window.matchMediaͷ ɹ@kokushing
window.matchMedia ͬͯ·͔͢ʁ
ͳʹͦΕ • CSSͷϝσΟΞΫΤϦʢͱಉ͡هड़ʣΛJSͰ͑Δ windowΦϒδΣΫτͷϝιου • Οϯυͷ෯ɾߴ͕͞ΫΤϦͷ݅จͱҰக͢Ε matchesϓϩύςΟ͕tureΛฦ͢ • addListenerϝιουΛݺͼग़͢͜ͱͰϦεφΛొ͠ɺɹ resizeΠϕϯτͷΑ͏ʹαΠζมߋΛݕ͢Δ͜ͱՄೳ
• IE10Ҏ্Ͱಈ͘
None
࣮ࡍͷσϞ https://kokushin.github.io/matchMedia/
// メディアクエリリストの作成 const mql = window.matchMedia('(max-width: 767px)'); // クエリの条件分に従って処理させる const
handleScaleChange = (mql) => { if (mql.matches) { /* ウィンドウの横幅が767px以下の場合 */ } else { /* ウィンドウの横幅が768px以上の場合 */ } } // メディアクエリリストをリスナに登録 mql.addListener(handleScaleChange); // 初回実⾏ handleScaleChange(mql);
ϝϦοτ • CSSͷϝσΟΞΫΤϦͱಉ͡هड़ͳͷͰ݅จ͕ཧղ͠ ͍͢ = ಋೖίετΊ • ݅จͱҰகͨ͠ͱ͖ʹҰ͚ͩॲཧ͞ΕΔͷͰonresize ΠϕϯτൃՐ࣌ͷແବͳϑϥάཧΛ͢Δඞཁͳ͍ let
changeFlag = false; if (!changeFlag) { /* ウィンドウサイズが変わったときの処理 */ changeFlag = true; }
ϝσΟΞΫΤϦͱಉ͡ͳͷͰ… • (min-width: 1000px) and (max-width: 1200px) ͳͲෳࡶͳ ݅จॻ͖͍͢ •
(orientation: portrait) (orientation: landscape) ͳͲ ͑ΔͷͰॎԣൺͷผʹ༗ޮ
YES! matchMedia
window.matchMedia - Web API ΠϯλʔϑΣΠε | MDN https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia
εΫϦϓτ͔ΒͷϝσΟΞΫΤϦͷ༻ | MDN https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Testing_media_queries
એ https://www.makepost.net/