JavaScriptメディアクエリを使用します

JavaScriptメディアクエリ：ウィンドウのサイズを超えて

メディアの質問を考えると、どのような湧き出るのですか？おそらく、このようなCSSルール：

体 {
  背景色：プラム;
}

@media（min-width：768px）{
  体 {
    背景色：トマト。
  }
}

CSSメディアクエリは、レスポンシブデザインの基本であり、ビューポートのサイズ、デバイスの種類、設定（配色、動き）などに基づいてスタイルを適用します。ただし、JavaScriptはメディアクエリ機能も提供します。これは、レスポンシブプラグインを作成したり、画面条件に基づいて要素を動的に調整するのに役立つことがよくあります。

CSSとは異なり、JavaScriptのメディアクエリ処理は異なります。コアコンセプトは同じままです。条件を一致させ、アクションを適用します。

matchMedia()を使用する

matchMedia()メソッドは、メディアクエリが現在のドキュメント状態と一致するかどうかを決定します。 CSSオブジェクトモデルビューモジュールワーキングドラフトにあるにもかかわらず、ブラウザサポートは優れています。

使用法はCSSを反映しています：メディアクエリ文字列を渡してmatchMedia()に渡し、 .matchesプロパティを確認します。

 //クエリを定義します
const mediaquery = window.matchmedia（ '（min-width：768px）'）;

matchMedia() 、 MediaQueryListオブジェクトを返します。その.matchesプロパティ（読み取り専用ブール）は、ドキュメントがクエリと一致するかどうかを示します。

 //ビューポートのメディア条件を少なくとも768px幅
const mediaquery = window.matchmedia（ '（min-width：768px）'）;
//メディアクエリが一致するかどうかを確認します
if（mediaquery.matches）{
  //アクションをトリガーします
  アラート（ 'メディアクエリマッチング！'）;
}

これにより、単一のチェックが処理されます。継続的な監視には、イベントリスナーが必要です。

変更を聞いています

MediaQueryList 、メディアクエリのステータスが変更されたときにトリガーされるコールバック関数（ .onchangeイベント）を登録するために、 addListener() （およびremoveListener() ）を提供します。これにより、更新された条件に対するレスポンシブアクションが可能になります。

 //少なくとも768px幅のビューポートの条件を作成する
const mediaquery = window.matchmedia（ '（min-width：768px）'）;

function handletabletchange（e）{
  //メディアクエリが一致するかどうかを確認します
  if（e.matches）{
    //アクションを実行します
    console.log（ 'メディアクエリマッチング！'）;
  } それ以外 {
    console.log（ 'メディアクエリは比類のない！'）;
  }
}

//イベントリスナーを登録します
MediaQuery.Addlistener（Handletablethange）;

//初期チェック
Handletablethange（MediaQuery）;

addListener()すぐに発生しません。 MediaQueryListオブジェクトを使用してハンドラーを引数として手動で呼び出す必要があります。

「古い」アプローチ

比較のために、古いメソッドは、 window.innerWidthまたはwindow.innerHeightを備えたresizeイベントリスナーを使用します。これは効率が低く、汎用性が低くなります。

 function checkmediaquery（）{
  //ウィンドウの内側幅が768pxを超えるかどうかを確認します
  if（window.innerwidth> 768）{
    //アクションを実行します
    console.log（ 'メディアクエリマッチング！'）;
  }
}

//ウィンドウのサイズ変更イベントのリスナーを追加します
window.addeventlistener（ 'resize'、checkmediaquery）;

これはパフォーマンス集約型であり、より強力なmatchMedia()アプローチとは異なり、ビューポートサイズのチェックに限定されます。

結論

matchMedia()とMediaQueryList 、堅牢なJavaScriptメディアクエリ処理を提供し、1回限りのチェックと連続チェックの両方を有効にし、単純なビューポートサイズを超えたさまざまな条件の変化に反応します。古いサイズresizeイベントリスナーは機能的なままですが、効率が低く、機能が豊富ではありません。 matchMedia()の柔軟性により、最新のレスポンシブJavaScript開発の優先方法になります。

以下は、古い方法で利用できない機能を示す例を示します。これは、景観の向きを検出します。これは、HTML5ゲーム開発で頻繁に使用されます。

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