MatchMediaを使用してJavaScriptでメディアクエリを使用する方法

コアポイント

• CSSのレスポンシブデザインに当初使用されていたメディアクエリは、JavaScriptで使用して、画面のサイズ、解像度、方向などのデバイス特性に基づいてコンテンツまたは機能を調整することもできます。
JavaScriptの APIを使用すると、CSS3メディアクエリステータスの変更を検出できます。特定のメディアクエリが現在のデバイスと一致し、変更に応じてイベントリスナーを追加できるかどうかを判断するために使用できる
• オブジェクトを返します。 window.matchMedia MediaQueryListJavaScriptメディアクエリは、最新のブラウザで広くサポートされており、レスポンシブデザインを作成する信頼できる方法を提供します。 CSSメディアクエリと組み合わせて使用​​でき、enquire.jsやmatchmedia.jsなどのさまざまなライブラリがこれらのクエリの作成と管理のプロセスを簡素化できます。

この記事は2011年に書かれ、2018年に更新されました

。レスポンシブデザインが最初に導入されたとき、それはCSSが表現グリッドを取得して以来、Webレイアウトの最もエキサイティングな概念の1つでした。基礎となるテクノロジーは、メディアクエリを使用して、タイプ、幅、高さ、方向、解像度、アスペクト比、視聴デバイスの色深度を決定して、さまざまなスタイルシートを提供します。レスポンシブデザインがCSSレイアウトに限定されていると思われる場合は、この記事で説明するJavaScriptでメディアクエリも使用できると聞いて喜んでいます。 CSSのメディアクエリ

次の例では、はすべてのデバイスに提供されています。ただし、画面の水平幅が500ピクセル以上の場合は、：も送信されます。

cssbasic.css可能性は無限であり、テクノロジーはインターネット上のほとんどのWebサイトで長い間使用されてきました。ブラウザの幅のサイズを調整すると、ページレイアウトの変更がトリガーされます。今日、メディアクエリを使用すると、CSSのデザインや要素のサイズを簡単に変更できます。しかし、コンテンツや機能を変更する必要がある場合はどうなりますか？たとえば、小規模な画面では、より短いタイトル、JavaScriptライブラリを減らすか、ウィジェットの操作を変更することをお勧めします。ビューポートのサイズはJavaScriptで分析できますが、これは少し混乱しています：csswide.css

<code class="language-html"><link rel="stylesheet" media="all" href="cssbasic.css">
<link rel="stylesheet" media="(min-width: 500px)" href="csswide.css"></code>

ほとんどのブラウザは

および

をサポートしています。 （IE 10の前の奇妙なモードバージョンには、

および
• 。）window.innerWidthが必要です。 window.innerHeight document.body.clientWidthdocument.body.clientHeight
すべての主要なブラウザは
• およびwindow.onresizeをサポートしていますが、一貫性がありません。ブラウザとモードに応じて、ウィンドウまたはドキュメントのサイズが返されます。
• document.documentElement.clientWidthビューポートサイズの変更を正常に検出しても、方向やアスペクト比などの要因を自分で計算する必要があります。 CSSにメディアクエリルールを適用する際のブラウザの仮定に一致するという保証はありません。 document.documentElement.clientHeight

JavaScriptコードを使用してメディアクエリを書き込む方法

幸いなことに、JavaScriptのCSS3メディアクエリステータスの変更に応答することができます。キーAPIはwindow.matchMediaです。これにより、CSSメディアクエリで使用されているメディアクエリ文字列と同じ文字列が渡されます。

クエリの結果に基づいて、

<code class="language-html"><link rel="stylesheet" media="all" href="cssbasic.css">
<link rel="stylesheet" media="(min-width: 500px)" href="csswide.css"></code>

属性はmatchesまたはtrueを返します。たとえば、false

<code class="language-javascript">const mq = window.matchMedia("(min-width: 500px)");</code>

変更が検出されたときに発火するイベントリスナーを追加することもできます：

また、イベントを定義した後、ハンドラーに直接電話する必要があります。これにより、ページの読み込み中または後にコードを初期化できるようになります。それがなければ、ユーザーがブラウザのサイズを変更していない場合、

<code class="language-javascript">if (mq.matches) {
  // 窗口宽度至少为 500 像素
} else {
  // 窗口宽度小于 500 像素
}</code>

は呼び出されません。執筆時点では、

はあらゆる方法で優れたブラウザのサポートを持っているため、生産環境でそれを使用しない理由はありません。ブラウザのウィンドウサイズに応じて、「500ピクセル以上」から「500ピクセル未満」に動的に変更されるように、次のデモテキストをチェックしてください。または、サンプルコードをダウンロードしてください：WidthChange()CodePenデモリンクmatchMediaJavaScript Media Query（FAQ）

に関するよくある質問

（FAQセクションを保存して改善して、より簡潔で明確にし、より明確な形式を使用する必要があります。）スペースの制限のためにFAQセクションを完全に書き換えることはできませんが、ここにいくつかあります。改善の提案：

もっと簡潔な言語を使用してください：

冗長な説明を避けてください。

• より明確な形式を使用してください：リストまたはテーブルを使用して、質問と回答を整理します。
• より正確な回答：答えが正確であることを確認し、曖昧な表現を避けてください。
• サンプルコードの追加：より多くの技術的な問題については、短いコードの例を提供します。
• 上記の改善により、FAQパーツを読みやすくして理解しやすくすることができます。

以上がMatchMediaを使用してJavaScriptでメディアクエリを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。