Media Queriesを使用して1ソースでレスポンシブ対応をする

今や特に珍しくも無いレスポンシブデザイン。PC・タブレット・スマホ、いろいろなデバイスでネットができるので、各デバイスで最適化させたサイトを見せたいというのは当然なところでもありますね。
ちょっと前に1ソースでレスポンシブ対応をする業務があったので、復習をかねてのメモ。

CSS3のMedia Queriesで読み込む条件が指定できるようになったのはとても便利だと思います。
可能になっていなければ、今でもjavascriptかPHPでユーザーエージェントを見て切り替えをしていたのでしょうかね？本来ならばそっちが正しい？のかもしれませんが…

例として、最大・中間・最小となる3つを設置。
PCサイズ・タブレットサイズ・スマホサイズと思っていただければよいです。

1.HTML内にMedia Queriesの記述をする方法

HTML内で行う場合は、読み込むCSSファイルをブラウザサイズによって切り替えます。
CSSを記述する時のmediaの部分にmax-widthやmin-widthを使用して、読み込む条件を切り分けます。

サンプルページを表示

<link type="text/css" rel="stylesheet" media="only screen and (min-width: 961px)" href="pc.css">
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 960px)" href="tablet.css">
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 480px)" href="sp.css">

PCは最大表示になるので、min-widthで条件を追加。
タブレットはPCとの境目になるので、max-widthで条件を追加。
スマホはタブレットとの境目になるので、max-widthで条件を追加。

自分が考えるこの場合における記述のメリット・デメリット

2.CSS内にMedia Queriesを記述する方法

CSS内で行う場合は、@media screen and ()を使用してブラウザサイズによって切り替えます。
()の中にmax-widthやmin-widthを使用して、読み込む条件を切り分けます。

サンプルページを表示

.responsible {
	border: solid 1px #333;
	background-color: #666;
	color: #FFF;
	padding: 24px;
}

@media screen and (max-width: 960px) {
	.responsible {
		border: solid 1px #FF9B2D;
		background-color: #FFB96D;
	}
}

@media screen and (max-width: 480px) {
	.responsible {
		border: solid 1px #2D5CFF;
		background-color: #6C8DFF;
	}
}

条件の追加などは1.であげたものと同じです。

自分が考えるこの場合における記述のメリット・デメリット

あと、共通して言えることとしたら記述の優先順位でしょうか。
PCサイズから読み込み、タブレットサイズ→スマホサイズと、サイズを狭くしていくのか、逆にスマホサイズ→タブレットサイズ→PCサイズと、サイズを広げていくのかですかね。

経験談的に言うのであれば、最大か最小のサイズをきっちり仕上げてから、徐々にサイズ違いをCSSの上書きで作っていくほうがやりやすいかなと思います。
個人としては1ソースよりも、各ブラウザ(デバイス)ごとのソースが合ったほうが、それぞれに最適なデザインやソースにできるのでやりやすいんですけどね。