https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-the-matchmedia-method-to-detect-that-the-screen-size-exceeds-the-breakpoint-in-javascript/
https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-the-matchmedia-method-to-detect-that-the-screen-size-exceeds-the-breakpoint-in-javascript/

JavaScriptで画面サイズがブレークポイントを超えたことを検知するmatchMediaメソッドの使い方

ブレークポイントの変更を検知

JavaScriptで画面サイズがブレークポイントを超えた時に処理を追加するにはmatchMedia()メソッドを利用します。

メソッド

メソッド意味返り値
matchMedia(メディアクエリ)メディアクエリの情報MediaQueryList オブジェクト
matchMedia(メディアクエリ).addListener(処理)メディアクエリに一致した時に処理を実行するなし
matchMedia()メソッド

プロパティ

プロパティ内容
matchMedia(メディアクエリ).matchesメディアクエリに一致するかどうか真偽値

サンプルコード

サンプルコードとして、min-width: 768pxを検知して、ウィンドウサイズが768px以下の時は「ウインドウサイズが768pxを超えていません。」というテキストを出力し、超えている時は「ウインドウサイズが768pxを超えています。」と出力するサンプルコードを紹介します。

Output

メディアクエリ:768px時点で文字を書き換え

Pug
p メディアクエリ:768px時点で文字を書き換え
	div#targetText1
JavaScript
const targetText = document.getElementById('targetText1');
// メディアクエリオブジェクト情報を取得
const mediaQueryList = matchMedia('(min-width: 768px)')
// メディアクエリが変更されたタイミングで処理
mediaQueryList.addListener(( mediaQueryList ) => {
	if (mediaQueryList.matches === true) {
		targetText.textContent = 'ウインドウサイズが768pxを超えています。';
  } else {
		targetText.textContent = 'ウインドウサイズが768pxを超えていません。';
  }
});

if (mediaQueryList.matches === true) {
		targetText.textContent = 'ウインドウサイズが768pxを超えています。';
  } else {
		targetText.textContent = 'ウインドウサイズが768pxを超えていません。';
  }
インストラクター
コメント

コメントを残す