CSS3のMedia Queriesという便利な仕様を使ってウィンドウサイズやスマートフォン等のデバイスに合わせて適用させるCSSを振り分ける方法をメモ。

Media Queriesの記述方法

Media Queriesの記述方法には、外部CSSの読み込み時に振り分ける方法と、CSSファイル内で部分的に振り分ける方法があります。

↓外部CSSの読み込み時に振り分ける場合

<link href="css/style1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)" >
<link href="css/style2.css" rel="stylesheet" type="text/css" media="only screen and (min-height: 640px) and (max-width: 1024px)" >

↓CSSファイル内で部分的に振り分ける場合

@media screen and (max-device-width: 320px) {
  /*ここに内容*/
   div{
       ------
   }
}
@media screen and (min-height: 640px) and (max-width: 1024px) {
  /*ここに内容*/
   div{
       ------
   }
}

みたいな感じに記述すればOK。

Media Queriesの振り分け条件

Media Queriesの振り分け条件に指定できる主なパラメータはそれぞれ

max-width: ウィンドウサイズの最大幅。このサイズより小さい場合に適用
min-width: ウィンドウサイズの最小幅。このサイズより大きい場合に適用
max-height: ウィンドウサイズの最大高さ。このサイズより小さい場合に適用
min-height: ウィンドウサイズの最小高さ。このサイズより大きい場合に適用
max-device-width: デバイスサイズの最大幅。このサイズより小さい場合に適用
min-device-width: デバイスサイズの最小幅。このサイズより大きい場合に適用
max-device-height: デバイスサイズの最大高さ。このサイズより小さい場合に適用
min-device-height: デバイスサイズの最小高さ。このサイズより大きい場合に適用
device-pixel-ratio: デバイスの解像度(webkit)
orientation: デバイスの向きで判定
portrait ・・・縦向き
landscape・・・横向き

IE6~8の対応

IE6~8はCSS3に対応してないので、Media QueriesをIEに対応させたい場合は
>css3-mediaqueries-js
このプラグインを使用すればOK

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

みたいな感じでIE9以下に読み込ませてあげます。