レスポンシブWebデザインを実現するためには、メディアクエリが不可欠です。
メディアクエリは、ウィンドウの幅や画像解像度、ディバイスの向きなどを条件にして、HTMLに適用するスタイルを切り替えることができるCSS3の新機能です。
たとえば下記のように使用します。
.block_body { color:#666; } /* タブレット向けのスタイル:460px ~ 979px */ @media only screen and (min-width: 460px) { .block_body { color:#000; } } /* PC向けのスタイル:980px */ @media only screen and (min-width: 980px) { .block_body { color:#fff; } }
↑
ウィンドウの幅が460px未満(スマホ向け)では、色をグレー(#666)で表示する。
ウィンドウの幅が460px以上(タブレット向け)になったら、色を黒(#000)にする。
ウィンドウの幅が980px以上(PC向け)になったら、色を白(#fff)にする。
460px、980pxが、ブレイクポイントになります。