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
430
AI彼女の感情制御を頑張る話
kokushin
3
780
サイト制作における、より効果的な演出テクニックとは?
kokushin
1
98
Other Decks in Programming
See All in Programming
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Remix on Hono on Cloudflare Workers
yusukebe
1
300
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
Jakarta EE meets AI
ivargrimstad
0
620
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
How to Think Like a Performance Engineer
csswizardry
20
1.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Facilitating Awesome Meetings
lara
50
6.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
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/