Web-Gimmick Web制作と知識のメモ帳

レスポンシブに必須 Media Queries。画面サイズでCSSを切り替える方法。

レスポンシブサイト、本当に要望が多いです。
今後はモバイルファーストの時代とのことですが、実際の案件では今のところはPCファーストで構築していく形が多いですね。

まぁその話はさておき、
レスポンシブコーディングはこれがないと初まらないですね。
Media Queriesについて。

Media Queriesとは

レスポンシブコーディング必須の要素。
画面サイズを小さくしていくと、あるサイズを境に見た目が最適化されて変更されます。

PC表示 → タブレット表示 → スマホ表示 の順に。

このブログの様に指定した画面サイズでCSSのスタイルを変更させるための記述がMedia Queriesです。

Media Queriesの記述方法。

PCファーストの場合

	/* 980px以上 PCの記述 */
@media screen and (max-width: 979px) {
	/* 979px以下 タブレットの記述 */
}
@media screen and (max-width: 767px) {
	/* 767px以下 タブレットとスマホの記述 */
}
@media screen and (max-width: 479px) {
	/* 479px以下 スマホの記述 */
}

モバイルファーストの場合

	/* 479px以下 スマホの記述  */
@media screen and (min-width: 480px) {
	/* 480px以上 タブレットとスマホの記述 */
}
@media screen and (min-width: 768px) {
	/* 768px以上 タブレットの記述 */
}
@media screen and (min-width: 980px) {
	/* 980px以上 PCの記述 */
}

ウィンドウサイズで個別に指定する場合

@media screen and (min-width: 980px) {
	/* 980px以上 PCの記述 */
}
@media screen and (min-width: 768px) and (max-width: 979px) {
	/* 768px~979pxまで タブレットの記述 */
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
	/* 480px〜767pxまで タブレットとスマホの記述 */
}
@media screen and (max-width: 479px) {
	/* 479px以下 スマホの記述 */
}

IE8とそれ以下への対応。

毎度のことですがIEの問題、
Media Queriesが使えるのはIE9以上です。

IE8への対応。

<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

IE7以下への対応。

IE7以下は生産性やコストを考慮してレスポンシブ対応はしない。
現状では利用者も減っているのでIE7への対応は必要ないと思います。

関連する記事はこちら

コメントをどうぞ

サイト内検索

Copyright ShitteLog All rights reserved.