2015年3月31日火曜日

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対策だったのにね。。。あれはあれでつらかったですが・・・・・

0 件のコメント:

webの森のFBページへも来て下さい