従来から使われてきたMedia Type
従来からスタイルシートを指定する際、以下のようにMedia Typeが利用されてきました。
<link rel="stylesheet" type="text/css" href="all-style.css" media="all" />
<link rel="stylesheet" type="text/css" href="screen-style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print-style.css" media="print" />
CSS3 Media QueryはこのMedia Typeの拡張です。
従来のMedia Typeよりも、より細かく条件をつけて指定することができます。
CSS3 Media Queryの例
<link rel='stylesheet' media='screen and (max-width: 700px)' href="css/style01.css" />
上の例では、ブラウザのスクリーンサイズが700px以下なら、style01.cssを適用するように指定しています。
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)'
href="css/style02.css" />
上の例では、ブラウザのスクリーンサイズが701px以上、かつ900px以下なら、style02.cssを適用するように指定しています。
<link rel='stylesheet' media='screen and (min-width: 901px)' href="css/style03.css" />
上の例では、ブラウザのスクリーンサイズが901px以上なら、style03.cssを適用するように指定しています。
このように、ユーザーのデバイスにあわせて、cssを変更するといった使い方などが可能になります。
ほとんどのモダンブラウザはCSS3 Media Queryに対応していますが、IEはCSS3に対応している9以上を除いて非対応です。
CSS3 Media Queryを使ったテスト（IEの8以下は非対応です）
