PC・スマホでMedia Queriesを使って個別にCSSを読み込ませる方法（IE対策済み）

最近はレスポンシブ対応のサイトが普通になりつつありますがそんなレスポンシブサイトを制作するためには必須なのがディスプレイの横幅でレイアウトを変更することができるMedia Queriesを使う方法です。

Media Typeとは？

Media Queriesとは Media Type の拡張です。
head内のmetaタグに書くmedia=”screen” や media=”print”などがMedia Typeです。

<link rel="stylesheet" href='style.css' type="text/css" media="screen" />

ただMedia QueriesはIE8以下はサポートしていないのでcss3-mediaqueries.jsなどを追記する必要がありますが効かなかった場合、以下のようにCSSを読み込ませます。

まずはPCとスマホを判別し、その後に条件分岐でIE6～8に対応したスタイルシートを読み込ませるようにしました。

<!-- スマホ用　横幅が最大○○まではsmartphone.cssを読み込む -->
<link rel="stylesheet" media="screen and (max-device-width: ○○px)" href="css/smartphone.css" />

<!-- PC用　横幅が最低○○からはcss.cssを読み込む -->
<link rel="stylesheet" media="screen and (min-device-width: ○○px)" href="css/css.css" />

通常、Media QueriesはIE8以下では効かないための対処。

<!-- IE6～8用はcss.cssを読み込む -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/css.css" />
<![endif]-->