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
790
AI彼女とペアプロする話
kokushin
2
530
AI彼女の感情制御を頑張る話
kokushin
3
870
サイト制作における、より効果的な演出テクニックとは?
kokushin
1
110
Other Decks in Programming
See All in Programming
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
580
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
500
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
What's new in Spring Modulith?
olivergierke
1
160
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
330
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
170
Swift Concurrency - 状態監視の罠
objectiveaudio
2
550
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
740
Six and a half ridiculous things to do with Quarkus
hollycummins
0
190
Introduce Hono CLI
yusukebe
6
2.9k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Designing for Performance
lara
610
69k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Documentation Writing (for coders)
carmenintech
75
5.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
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/