Web Design Leaves

@media (orientation: landscape) {
  /* ビューポートの向きが横長の場合 */
  .foo {
    color: red;
  }
}

@media (orientation: portrait) {
  /* ビューポートの向きが縦長の場合 */
  .foo {
    color: blue;
  }
}

const mediaQueryList = window.matchMedia('(orientation: landscape)');
//ビューポートの向きが横長かどうかを表すメディアクエリ (orientation: landscape) を引数に指定

if (mediaQueryList.matches) {
  /* orientation は landscape（現在ビューポートは横長） */
} else {
  /* orientation は landscape ではない（現在ビューポートは縦長） */
}

const mediaQueryList = window.matchMedia('(orientation: landscape)');

//MediaQueryList オブジェクトの change イベントにリスナーを登録
mediaQueryList.addEventListener('change', (e) => {
  // イベント（e）の matches プロパティで判定
  if (e.matches) {
    // orientation: landscape が true
    alert('landscape');
  } else {
    // orientation: landscape が false
    alert('portrait');
  }
});

const mediaQueryList = window.matchMedia('(orientation: landscape)');

let fooStyle = document.querySelector('.foo').style;

// 一度現在の（実際の）ビューポートの向きを調べて文字色を設定（初期化処理）
if (mediaQueryList.matches) {
  fooStyle.color = 'red';
} else {
  fooStyle.color = 'blue';
}

// ビューポートの向きが変われば文字色を変更
mediaQueryList.addEventListener('change', (e) => {
  if (e.matches) {
    fooStyle.color = 'red';
  } else {
    fooStyle.color = 'blue';
  }
});

const mediaQueryList = window.matchMedia('(orientation: landscape)');
let fooStyle = document.querySelector('.foo').style;

// 向き変更時のリスナー関数を定義
const orientationChange = (e) => {
  if (e.matches) {
    fooStyle.color = 'red';
  } else {
    fooStyle.color = 'blue';
  }
}

// 向き変更時のリスナーを一度実行（初期化処理）
orientationChange(mediaQueryList);

// change イベントにリスナーを登録
mediaQueryList.addEventListener('change',orientationChange);

<div class="foo">ビューポートの向き（または縦横比）により文字色が変わります。</div>

const mediaQueryListObject = window.matchMedia(mediaQueryString)

// 幅が640px以上のビューポートをターゲットとする MediaQueryList オブジェクトを作成
const mediaQuery = window.matchMedia('(min-width: 640px)')

// ドキュメントが指定されたメディアクエリにマッチするかを判定
if (mediaQuery.matches) {
  console.log('ビューポート幅は640px以上');
}else{
  console.log('ビューポート幅は640px未満');
}

 // ドキュメントが指定されたメディアクエリにマッチするかを判定
if (window.matchMedia('(min-width: 640px)').matches) {
  console.log('ビューポート幅は640px以上');
}else{
  console.log('ビューポート幅は640px未満');
}

document.addEventListener('DOMContentLoaded', () => {

  if (window.matchMedia('(max-width: 480px)').matches) {
    //ビューポート幅が480px以下の場合の処理
    console.log('スマホと判定しました。');
  } else {
    //ビューポート幅が480pxより大きい場合の処理
    console.log('スマホではないと判定しました。');
  }

});

document.addEventListener('DOMContentLoaded', () => {

  // メディアクエリを指定して MediaQueryList オブジェクトを作成
  const mediaQuery = window.matchMedia('(max-width: 480px)');

  // メディアクエリの状態を評価する関数（コールバック関数）
  const checkMediaQuery = (mq) => {
    if (mq.matches) {
      //ビューポート幅が480px以下の場合の処理
      console.log('スマホと判定しました。');
    } else {
      //ビューポート幅が480pxより大きい場合の処理
      console.log('スマホではないと判定しました。');
    }
  }
  // コールバック関数に MediaQueryList オブジェクトを渡して実行（初期化処理）
  checkMediaQuery(mediaQuery);

  // 状態が変化（480pxの閾値を通過する変更が発生）したらコールバック関数を実行
  mediaQuery.addEventListener('change', checkMediaQuery);
});