CSS

【CSS】CSSの「メディアクエリ」はネスト(入れ子)できる

CSS

CSSでレスポンシブデザインなどを作成する場合、メディアクエリ、(@media only screen and~)を指定してコーディングすると思います。

私の場合、幅の切り替えのポイントは、下記のようにしています。

  • 768px
  • 600px
  • 414px
  • 375px
  • 320px

768px を基準に設定し、多くの場合、「414px、375px、320px」の指定は10~20行程度に収まります。

そのため、414px などでのCSSの記述は、768px 内にネスト(入れ子)にして記述したほうが、スマートな場合があります。

まとめて書く場合、一度、「}」で閉じず、768px 中に記述します。

IEでは、効かないとのことですが、レスポンシブデザインが目的の場合は、スマホなどモバイル端末が対象で、IEで閲覧することはないと思いますので、考慮しなくても問題ないと思います。

ABOUT ME
マシュマロ
Webクリエイター、SEO対策,ガジェット,アフィリエイト情報などを公開中イラスト素材サイトも運営中です。イラストたうん