いろんな方法がありますが、簡単な覚え書きをひとつ。
/*最初にスマホ以上すべての横幅のスタイルを書く*/
★ここにスマホを含むすべてのスタイルを記述
/*次にスマホの横サイズ以上になった場合*/
/* 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対策だったのにね。。。あれはあれでつらかったですが・・・・・
