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
760
AI彼女とペアプロする話
kokushin
2
530
AI彼女の感情制御を頑張る話
kokushin
3
870
サイト制作における、より効果的な演出テクニックとは?
kokushin
1
110
Other Decks in Programming
See All in Programming
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
570
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.5k
dynamic!
moro
9
5.6k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
860
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
230
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
2
120
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2.1k
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
740
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
900
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Code Reviewing Like a Champion
maltzj
525
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Music & Morning Musume
bryan
46
6.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Invisible Side of Design
smashingmag
301
51k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.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/