css3 日本一わかりやすいメディアクエリのことを簡単に解説

css3のレスポンシブ・デザインでよくこんがらがって、間違えてしまうのがメディアクエリの使いこなし。

いろんな方法がありますが、簡単な覚え書きをひとつ。

---

/*最初にスマホ以上すべての横幅のスタイルを書く*/

★ここにスマホを含むすべてのスタイルを記述

/*次にスマホの横サイズ以上になった場合*/

/* Minimum width of 600 pixels.最小幅600pxの記述　⇒601px以上の場合 */

@media screen and (min-width: 600px) {

★ここにタブレットのスタイルを記述

}

/*次に、PC、デスクトップ以上になった場合*/

/* Minimum width of 960 pixels.最小幅960pxの記述　⇒961px以上 */

@media screen and (min-width: 960px) {

★ここにPCだけのスタイルを記述

}

---

min-widthとか、max-widthとかいろいろ登場するのでわかりにくくなりがちですが、

min-widthとは、最小幅のことなので、つまりその数字以上の幅のスタイルをカッコ内に記述する

ということになります。

スマホの時代になってwebデザイナーさんが覚えないといけない技術もどんどん変化してます。

今、サイト構築上で一番時間をとられるのがスマホ対応にすること。

昔はIE対策だったのにね。。。あれはあれでつらかったですが・・・・・