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
160
window.matchMediaの話
Nagoya js @20180225
kokushin
February 26, 2018
Tweet
Share
More Decks by kokushin
See All by kokushin
趣味全開のAITuber開発
kokushin
0
200
AI彼女とペアプロする話
kokushin
2
480
AI彼女の感情制御を頑張る話
kokushin
3
830
サイト制作における、より効果的な演出テクニックとは?
kokushin
1
110
Other Decks in Programming
See All in Programming
Thank you <💅>, What's the Next?
ahoxa
1
490
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.5k
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
AI時代の開発者評価について
ayumuu
0
150
RubyKaigi Dev Meeting 2025
tenderlove
1
180
Exit 8 for SwiftUI
ojun9
0
130
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
210
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
3
470
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
520
Cursor/Devin全社導入の理想と現実
saitoryc
12
7.3k
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
680
Make Parsers Compatible Using Automata Learning
makenowjust
1
5.1k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.7k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
KATA
mclloyd
29
14k
Bash Introduction
62gerente
611
210k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
How to train your dragon (web standard)
notwaldorf
90
6k
Agile that works and the tools we love
rasmusluckow
328
21k
Music & Morning Musume
bryan
47
6.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
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/