Media Queriesを使ってWEBサイトをiPhoneに対応させる

CSS3のMedia Queriesを使ってiPhoneや他のスマホなどいろいろなデバイスに対応させることができます。
Media QueriesはMedia Typeの拡張で、以前から下記のような記述があります。

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

これを各デバイスのサイズに合わせて下記のように記述することができます。

<link rel="stylesheet" type="text/css" href="smartphone.css" media="screen and (max-width:320px)" />

また、CSSファイル上で記述する場合は

@media screen and (max-width: 320px) {
    body {
        background-color: #f0f0f0;
    }
}

このMedia Queriesを使用する際に注意したいのは、@mediaもほかの要素と同様に上から順番に適用されていきます。
ですので下記のように記述した場合、iPhoneとかで見るとすべてのスタイルが適用されることになります。

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}

これを防ぎたい場合はデバイスのサイズを範囲で指定することで回避することができます。

@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (min-width: 320px) and (max-width: 480px) {
}

デバイスのサイズごとにMedia Queriesを記述する例
Hardboiled CSS3 Media Queries

またこれらはCSS3からの仕様なのでIE（8以下）では、使うことができません。
しかしGoogleコードで公開されているcss3-mediaqueries-jsを使うことでIEでもMedia Queriesが使えるようになります。
（CSSファイル上での記述のみ適用されるみたいでlinkタグだけでは動作確認できませんでした）

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

※2012.7.3
この記事を書いて１年近く経ちますがデバイスの横とかでも制御できるみたいですね。

@media screen and (orientation:landscape)

こうすることでデバイスが横向きの場合のCSSを記述することができます。
ただしPCの場合は注意が必要です。
そのまま書くとPCは横向きと判断します。
（縦横の比率で制御してるのかな。。。幅を変えると変化したりします）