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
AI彼女とペアプロする話
kokushin
2
460
AI彼女の感情制御を頑張る話
kokushin
3
820
サイト制作における、より効果的な演出テクニックとは?
kokushin
1
100
Other Decks in Programming
See All in Programming
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
1k
生産性アップのためのAI個人活用
kunoyasu
0
640
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.7k
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
140
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
260
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
130
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
350
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Making Projects Easy
brettharned
116
6.1k
A better future with KSS
kneath
238
17k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Unsuck your backbone
ammeep
670
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Designing Experiences People Love
moore
141
23k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Building Your Own Lightsaber
phodgson
104
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
18k
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/