JavaScript とメディア クエリ: 包括的なガイド

メディア クエリは、畫面の幅、高さ、解像度などのユーザーのデバイスの特性に基づいてスタイルを適用するために使用される強(qiáng)力な CSS 機(jī)能です。 JavaScript は、これらの狀況の変化に対する動(dòng)的な応答を可能にし、さまざまなデバイス間でのアプリケーションの動(dòng)作をより詳細(xì)に制御できるようにすることで、メディア クエリのユーティリティを強(qiáng)化します。

---

1.メディア クエリとは何ですか?

開発者はメディア クエリを使用して、ユーザーのデバイスまたはビューポートのプロパティに基づいて條件付きで適用される CSS ルールを定義できます。

CSS の基本構(gòu)文:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

JavaScript では、Window.matchMedia() メソッドを使用してこれらのメディア クエリを動(dòng)的に操作できます。

---

2.メディア クエリで JavaScript を使用する

Window.matchMedia() メソッドを使用すると、メディア クエリをプログラムでテストし、変更にリアルタイムで応答できます。

構(gòu)文:

const mediaQuery = window.matchMedia("(max-width: 768px)");

クエリが一致するかどうかを確認(rèn)します:

if (mediaQuery.matches) {
  console.log("Viewport is 768px or smaller.");
} else {
  console.log("Viewport is larger than 768px.");
}

---

3.メディア クエリの変更をリッスンしています

addEventListener メソッドを使用して、メディア クエリ?duì)顟B(tài)の変更をリッスンできます。

例:

const mediaQuery = window.matchMedia("(max-width: 768px)");

function handleMediaQueryChange(e) {
  if (e.matches) {
    console.log("Now in mobile view.");
  } else {
    console.log("Now in desktop view.");
  }
}

// Attach listener
mediaQuery.addEventListener("change", handleMediaQueryChange);

このアプローチは、ページをリロードすることなく、ビューポートの変更に動(dòng)的に応答します。

---

4.一般的な使用例

a) 動(dòng)的レイアウト調(diào)整

畫面サイズに基づいて JavaScript 駆動(dòng)のレイアウトを変更します。

const mediaQuery = window.matchMedia("(max-width: 768px)");

function adjustLayout() {
  if (mediaQuery.matches) {
    document.body.style.backgroundColor = "lightblue";
  } else {
    document.body.style.backgroundColor = "white";
  }
}

// Initial check and listener
adjustLayout();
mediaQuery.addEventListener("change", adjustLayout);

b) 條件付きスクリプトの読み込み

特定の條件が満たされた場(chǎng)合にのみスクリプトをロードまたは実行します。

const mediaQuery = window.matchMedia("(max-width: 768px)");

if (mediaQuery.matches) {
  // Load mobile-specific script
  import("./mobile.js").then(module => {
    module.init();
  });
}

c) アニメーションの調(diào)整

パフォーマンスを向上させるために、小型デバイスではアニメーションを無(wú)効にします。

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

---

5. JavaScript とメディア クエリを組み合わせる利點(diǎn)

1. 動(dòng)的動(dòng)作: ページをリロードせずに畫面の変化に反応します。
2. パフォーマンスの最適化: 條件付きでリソースまたはスクリプトを読み込みます。
3. 強(qiáng)化されたアクセシビリティ: モーションの削減など、ユーザーの好みに適応します。
4. UX の改善: さまざまなデバイスやビューポートに合わせてインタラクションを調(diào)整します。

---

6.ベストプラクティス

• CSS と JavaScript を組み合わせる: スタイルには CSS を使用し、ロジックには JavaScript を使用します。
• サイズ変更イベントのデバウンス: ウィンドウのサイズ変更に応答するとき、パフォーマンスの問題を回避するためにイベントをデバウンスします。
• フォールバック: サポートされていないブラウザのデフォルト動(dòng)作を常に含めます。
• 最新の構(gòu)文を使用します: 非推奨の addListener よりも addEventListener を優(yōu)先します。

---

7.ブラウザの互換性

最新のブラウザのほとんどは、Window.matchMedia() API を完全にサポートしています。ただし、古いブラウザでは MediaQueryList の addEventListener メソッドにポリフィルが必要な場(chǎng)合があります。

---

8.例: レスポンシブ ナビゲーション メニュー

これは、メディア クエリと JavaScript を組み合わせてレスポンシブ メニューを管理する実際の例です。

const mediaQuery = window.matchMedia("(max-width: 768px)");

---

9.結(jié)論

JavaScript とメディア クエリを組み合わせることで、非常に動(dòng)的で応答性の高いデザインを?qū)g現(xiàn)できます。このアプローチにより、ユーザーの好みやデバイスの特性にリアルタイムで適応できるようになり、パフォーマンスとユーザー エクスペリエンスの両方が向上します。これらのテクニックを習(xí)得することは、デバイスに優(yōu)しい最新の Web アプリケーションを構(gòu)築するために不可欠です。

こんにちは、アバイ?シン?カタヤットです!
**私はフロントエンドとバックエンドの両方のテクノロジーの専門知識(shí)を持つフルスタック開発者です。私はさまざまなプログラミング言語(yǔ)やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構(gòu)築しています。
私のビジネス用メールアドレスまでお?dú)葺Xにご連絡(luò)ください: **kaashshorts28@gmail.com.

以上がJavaScript とメディア クエリ: レスポンシブで動(dòng)的な Web アプリケーションの構(gòu)築の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。