▼ブレークポイントが1つのみ

/**
* addListener()でイベントリスナーを登録しても、最初は起動しない。
* イベントハンドラー関数を手動で呼び出し、引数でメディアクエリを渡す必要がある。
*/

// 幅が768px以上のビューポートをターゲットとする条件を作成
const mediaQuery = window.matchMedia('(min-width: 768px)');

function switchMedia(e) {
  if (e.matches) {
			// 処理を書く
  } else {
			// 処理を書く
	}
}

// イベントリスナーを登録
mediaQuery.addEventListener("change", switchMedia);
 
// 初期チェック
switchMedia(mediaQuery);

▼ブレークポイントが複数ある場合

/**
* ブレークポイントはmin-widthでも大きいものから順に書くこと。
* ブレークポイントを複数設置する際は、addEventListenerを"resize"にする。
* ただこれだとリサイズの度に処理が走るので負担軽減には繋がらないかも・・・？
*/

function switchMedia() {
  if (window.matchMedia('(min-width: 1024px)').matches) {
		// 1024px以上のとき

  } else if(window.matchMedia('(min-width: 768px)').matches) {
		// 768px以上のとき

  } else if(window.matchMedia('(min-width: 640px)').matches) {
		// 640px以上のとき

	} else {
		// 640px未満のとき

	}
}

window.addEventListener("resize", switchMedia);

switchMedia();

参考

JSのレスポンシブ対応をresizeからmatchMediaに移行した

CodePen Embed - 複数のメディアクエリをmatchMedia使って分岐してみよう！