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

javascript
この記事は約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だろうが、昔の怪しい中国端末だろうが、どんな端末でも使えるので便利です!

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました