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
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
490
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
980
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Model Pollution
hschwentner
1
190
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Documentation Writing (for coders)
carmenintech
75
5k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Visualization
eitanlees
148
16k
Speed Design
sergeychernyshev
32
1.1k
Unsuck your backbone
ammeep
671
58k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Embracing the Ebb and Flow
colly
88
4.8k
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/