EC-CUBEレスポンシブWebデザイン:メディアクエリとブレイクポイントの設定

レスポンシブ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が、ブレイクポイントになります。