Media Queriesの使い方を調べてみた

今までなんとなく使っていたので、Media Queriesの使い方をきちんと調べてみました。

基本的な使い方

PCのCSSを記述して、その後にMedia Queriesでタブレット・スマホの順にCSSを上書きしてみます。

HTML

<div id="contents">
	<p>コンテンツ内容</p>
</div>

CSS

#contents {
	background: red;
}

@media screen and (max-width: 960px) {
#contents {
	background: blue;
}
} /* max-width: 960px END */

@media screen and (max-width: 640px) {
#contents {
	background: green;
}
} /* max-width: 640px END */

#contentsの背景を赤色に指定して、960px以下のときは青、640px以下のときは緑に上書きしています。
記述するのは楽ですが、スマホで不要なCSSを読み込んでしまいます。
PCファーストでの記述のデモページ
　

次は反対に、スマホのCSSを記述して、その後にMedia Queriesでタブレット・PCの順にCSSを上書きしてみます。

CSS

#contents {
	background: green;
}

@media screen and (min-width: 640px) {
#contents {
	background: blue;
}
} /* min-width: 640px END */

@media screen and (min-width: 960px) {
#contents {
	background: red;
}
} /* min-width: 960px END */

#contentsの背景を緑色に指定して、640px以上のときは青、960px以上のときは赤に上書きしています。
スマホからコーディングしていく形になるので少し面倒になりますが、スマホに優先した記述ができます。
モバイルファーストでの記述のデモページ
　

andでの指定

サイズ指定は複数できるので、上書きしていく記述がやりにくい場合は範囲を指定することができます。

CSS

@media screen and (min-width: 0px) and (max-width: 640px) {
#contents {
	background: green;
}
} /* (min-width: 0px) and (max-width: 640px) END */

@media screen and (min-width: 641px) and (max-width: 960px) {
#contents {
	background: blue;
}
} /* (min-width: 641px) and (max-width: 960px) END */

@media screen and (min-width: 961px) {
#contents {
	background: red;
}
} /* min-width: 961px END */

0px～640pxは緑、641px～960pxは青、961px～は赤になります。
andでの指定のデモページ
　

CSSファイルの読み込みを変更

画面サイズ毎に、読み込む外部CSSを変更してみます。

HTML

<link rel="stylesheet" href="./sample4_sp.css" media="only screen and (min-width: 0px) and (max-width: 640px)" />
<link rel="stylesheet" href="./sample4_tb.css" media="only screen and (min-width: 641px) and (max-width: 960px)" />
<link rel="stylesheet" href="./sample4_pc.css" media="only screen and (min-width: 0px) and (min-width: 961px)" />

sample4_sp.css

#contents {
	background: green;
}

sample4_tb.css

#contents {
	background: blue;
}

sample4_pc.css

#contents {
	background: red;
}

CSSファイル読み込み変更のデモページ
　

orでの指定

「,」で区切ることでorのような形にできます。

CSS

#contents {
	background: blue;
}

@media screen and (min-width: 0px) and (max-width: 640px), screen and (min-width: 961px) {
#contents {
	background: red;
}
} /* (min-width: 0px) and (max-width: 640px), screen and (min-width: 961px) END */

通常は青色で、画面幅が0～640pxまたは961px～のときに赤に上書きします。
orでの指定のデモページ
　

デバイス幅での指定

画面幅ではなくデバイス自体の幅で指定をします。

CSS

@media screen and (min-device-width: 320px) and (max-device-width: 640px) {
#contents {
	background: green;
}
} /* (min-device-width: 320px) and (max-device-width: 640px) END */

@media screen and (min-device-width: 641px) and (max-device-width: 960px) {
#contents {
	background: blue;
}
} /* (min-device-width: 641px) and (max-device-width: 960px) END */

@media screen and (min-device-width: 961px) {
#contents {
	background: red;
}
} /* min-device-width: 961px END */

デバイス幅が320px～640pxでは緑、641px～960pxでは青、961px～では赤になります。
デバイス幅で指定のデモページ
　

画面高さでの指定

画面幅ではなく画面高さでも指定できます。

HTML

<div id="contents">
	<p>コンテンツ内容</p>
</div>
<div id="footer">
	フッター
</div>

CSS

#footer {
	width: 100%;
	height: 40px;
	background: orange;
}

@media screen and (min-height: 0px) and (max-height: 500px) {
#footer {
	position: relative;
}
} /* (min-height: 0px) and (max-height: 500px) END */

@media screen and (min-height: 501px) {
#footer {
	position: fixed;
	bottom: 0;
}
} /* min-height: 501px END */

画面の高さが501px以上の場合は画面下部に固定表示されます。
画面高さでの指定のデモページ
　

縦長・横長での指定

画面が縦長か横長かで指定を変更します。
スマホやタブレットで画面の向きに応じてCSSを変更したい場合に便利です。

CSS

@media screen and (orientation: landscape) {
#contents {
	background: blue;
}
} /* orientation: landscape END */

@media screen and (orientation: portrait) {
#contents {
	background: green;
}
} /* orientation: portrait END */

横長のときは青、縦長のときは緑になります。
縦長・横長での指定のデモページ
　

$(window).width()を使う場合の注意点

Media QueriesでCSSが変更されたときにJavaScriptで何か処理を行おうと思った場合、$(window).width()で幅を取得しているとMedia Queriesと値がずれます。

CSS

#contents {
	height: 2000px;
	background: red;
}

@media screen and (max-width: 960px) {
#contents {
	background: blue;
}
} /* max-width: 960px END */

JavaScript

$(function() {
	winWidth();
	$(window).on('resize', function() {
		winWidth();
	});
});

var current;
function winWidth() {
	if($(window).width() <= 960 && current != 'under') {
		current = 'under';
		console.log('～960px');
	} else if($(window).width() > 960 && current != 'over') {
		current = 'over';
		console.log('961px～');
	}
}

$(window).width()を使う場合の注意点のデモページ
ずれの原因は、Media Queriesがスクロールバーを含めた幅、$(window).width()が含めない幅を取得しているためです。
(スクロールバーが表示されていない場合は、ずれは発生しません。)

Media QueriesでのCSS変更時にJavaScriptを実行する方法は以前に記事を書いていますので、下記を参照ください。
Media QueriesのブレークポイントでJavaScriptを実行する方法 | cly7796.net
　

【参考サイト】

• CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
• HTML – Media Queriesの指定について – Qiita
• [CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例 | コリス
• Media Queries for Standard Devices | CSS-Tricks