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
420
AI彼女の感情制御を頑張る話
kokushin
3
780
サイト制作における、より効果的な演出テクニックとは?
kokushin
1
98
Other Decks in Programming
See All in Programming
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.5k
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
560
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
10k
Java ジェネリクス入門 2024
nagise
0
600
EventSourcingの理想と現実
wenas
6
2.1k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.5k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
7
420
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Gamification - CAS2011
davidbonilla
80
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Making Projects Easy
brettharned
115
5.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Producing Creativity
orderedlist
PRO
341
39k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
39
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Writing Fast Ruby
sferik
626
61k
The Pragmatic Product Professional
lauravandoore
31
6.3k
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/