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
150
window.matchMediaの話
Nagoya js @20180225
kokushin
February 26, 2018
Tweet
Share
More Decks by kokushin
See All by kokushin
AI彼女とペアプロする話
kokushin
2
410
AI彼女の感情制御を頑張る話
kokushin
3
780
サイト制作における、より効果的な演出テクニックとは?
kokushin
1
94
Other Decks in Programming
See All in Programming
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.5k
Architecture Decision Record (ADR)
nearme_tech
PRO
1
680
今インフラ技術をイチから学び直すなら
yuhta28
1
130
LangChainの現在とv0.3にむけて
os1ma
4
910
マルチモジュールにおけるテスト最適化
fxwx23
0
210
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
120
オートマトン学習しろ / Do automata learning
makenowjust
3
130
Patched fetch did not work
quramy
3
180
私のEbitengineの第一歩
qt_luigi
0
450
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
140
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
670
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
180
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Atom: Resistance is Futile
akmur
261
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Gamification - CAS2011
davidbonilla
79
5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
We Have a Design System, Now What?
morganepeng
48
7.1k
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/