【React】useMediaQuery は最終手段にしよう

2024/07/03 15 users React React Hooks CSS メディアクエリ

こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせるこ... 続きを読む

ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう

2022/04/01 15 users landscape hover ポパー width 関数

メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用すること... 続きを読む

JavaScriptでのメディアクエリ、matchMedia()の使い方を解説 | コリス

2020/09/15 20 users コリス match Media スライダー コンポーネント

メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、match... 続きを読む

やるやんwindow.matchmedia - FICC Workbook

2015/04/24 17 users FICC Workbook

window.matchmediaとは 簡単にいえば、JavaScript版 mediaqueryです。 https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia windowサイズに応じてJSの処理を書き分けることができます。 ただ、IE10より下では使えません！ スマホはバッチリ！ 使い方 とりあえず var widthMa... 続きを読む