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

CSS CSS

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

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

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

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

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

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

@media only screen and (max-width:768px){

	.sample li{
			width:30%;
		}
	
		@media only screen and (max-width:414px){
			.sample li{
				width:47%;
			}

		}
}

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

コメント

タイトルとURLをコピーしました