「レスポンシブWebデザイン」とは？
まずは、こちらのサンプルを、別ウィンドウで開いて確認してみてください。ブラウザウィンドウの横幅を変更すると、3段階でレイアウトが変化します。
このように1つのHTMLファイルを使いつつ、デバイスに大きさ／向きに応じて異なるレイアウトを適用させるのが「レスポンシブWebデザイン」です。
例えば、W3Cのサイトも、2段階でレイアウトが変化します。
レスポンシブWebデザインのギャラリーサイト「Media Queries」でたくさんの実例を見つけることができます。
スマートフォン、タブレットへの対応とレスポンシブWebデザイン
スマートフォンやタブレットは、縦置き/横置きのように向きを変更することができます。これによって表示される横幅が変わります。
それだけなく、同じAndroidでも、機種によって表示できる解像度（縦横のピクセル数）がマチマチなため、このレスポンシブWebデザインのノウハウは、レイアウトを変化させるだけでなく、画面にフィットさせるという意味で重要です。
どのように実現するのか？（1）
サンプルサイトでは、幅480、幅768ピクセルを区切りとして、それぞれ異なるCSSルールを読み込ませています。ちなみに、この区切りのことは「ブレーク・ポイント」と呼ばれます。
「rwd.css」を見ると、次のようなコメントと、それに続き、「@media only screen and (min-width: 481px)」のような記述が見つかります。
/* モバイルレイアウト : 480 px およびそれ以下. */
/* スマートフォン向けのCSSルール */
/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */
@media only screen and (min-width: 481px) {
/* タブレット向けのCSSルール */
}
/* デスクトップレイアウト : 769 px ～ 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */
@media only screen and (min-width: 769px) {
/* デスクトップ向けのCSSルール */
}
「@media only screen and (min-width: 481px)」は「横幅が481ピクセル以上のとき」、「@media only screen and (min-width: 769px)」は「横幅が769ピクセル以上のとき」といういう意味で、@mediaからはじまる記述をメディアクエリーと呼びます。
ご存じのとおり、CSSファイルは、上から下に読んでいきますので、コメントに記述されているように、タブレットレイアウトはモバイルレイアウトからスタイルを継承しますし、デスクトップレイアウトは、モバイルレイアウトとタブレットレイアウトからスタイルを継承します。
どのように実現するのか？（2）
レスポンシブWebデザインを実現する上でもうひとつ重要なのが、画像の伸び縮みです。通常は、次のようにimg要素にwidth/height属性を使って画像サイズを記述します。
<img src="images/sofa-01.png" alt="Chill Out Sofa" width="200" height="112">
一方、レスポンシブWebデザインでは、画面に応じて可変させるため、CSSに次のように記述します。
img {
max-width: 100%;
}
さらに、max-widthを解釈できないIE6のために次のCSSルールも併記します。
.ie6 img {
width: 100%;
}
このような画像の扱いを「フレキシブル・イメージ（Flexible Image）」と呼びます。なお、img要素にwidth／height属性よりも、CSSのwidth指定が優先されます。
