jQueryでメディアクエリの指定方法｜画面幅で判定

2020年09月05日

この記事は約1分で読めます。

jQueryで画面幅からメディアクエリを行う方法のご紹介です。
画面幅を取得し、横幅によって表示を切り替えるデモとjQueryです。
画面を広げたり縮めたりしてみてください！

DEMO

これは、表示。

width：px

jQuery

// 読み込み時とリサイズ時に処理を実行
media();
$(window).on("resize", function(){ media(); });

// メディアクエリ
function media() {
	// 横幅を取得
	var width = $(window).width();
	if(width > 1024) {
		// 画面幅が1024pxより上の時

	} else if(width > 768) {
		// 画面幅が1024px以下で768pxより上の時

	} else if(width <= 768) {
		// 画面幅が768px以下の時

	}
}

これなら、IEだろうが古いアンドロイドだろうが、ネットスケープだろうが、FireFoxOSだろうが、昔の怪しい中国端末だろうが、どんな端末でも使えるので便利です！