CSSでレスポンシブデザインなどを作成する場合、メディアクエリ、（@media only screen and～）を指定してコーディングすると思います。
私の場合、幅の切り替えのポイントは、下記のようにしています。
- 768px
- 600px
- 414px
- 375px
- 320px
768px を基準に設定し、多くの場合、「414px、375px、320px」の指定は10～20行程度に収まります。
そのため、414px などでのCSSの記述は、768px 内にネスト（入れ子）にして記述したほうが、スマートな場合があります。
まとめて書く場合、一度、「｝」で閉じず、768px 中に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@media only screen and (max-width:768px){ .sample li{ width:30%; } @media only screen and (max-width:414px){ .sample li{ width:47%; } } } |
IEでは、効かないとのことですが、レスポンシブデザインが目的の場合は、スマホなどモバイル端末が対象で、IEで閲覧することはないと思いますので、考慮しなくても問題ないと思います。
