@media screen and (min-width:0px)を指定したらデザインの崩れが直った～CSS覚書き～
レスポンシブデザインのWordpressのテーマを使ったサイトで、スマホサイズにするとデザインが崩れた時の覚え書き。
メディアクエリ（Media Queries）のサイズ指定で、@media screen and (min-width:783px) と @media screen and (min-width:980px) だけ指定されていたのを @media screen and (min-width:0px) も指定したらデザインの崩れが解消されました。
スポンサーリンク
メディアクエリで(min-width: 〇〇)を使う時は、全サイズ分指定が必要？
テーマのCSSを見ると、最初に
|
1 2 3 4 |
body { margin-left: 20px; margin-right: 20px; } |
を指定した上で、
|
1 2 3 4 5 6 |
@media screen and (min-width:783px){ body { margin-left: 30px; margin-right: 30px; } } |
|
1 2 3 4 5 6 |
@media screen and (min-width:980px){ body { margin-left: 40px; margin-right: 40px; } } |
となっていました。
理屈だけで考えると、
- width:783px 以上→左右のmarginが30px
- width:980px 以上→左右のmarginが40px
- それ以外の時（＝width:783px 以下）→左右のmarginが20px
という解釈になりそうだけど、この状態では、スマホサイズ（width:783px 以下）にすると左右のmarginが0扱いになってしまいました。
bodyにpadding:0を指定した方が良いという記事もあって、そのようにしてみたけど症状は変わらず。
試しに、以下を追加したらデザインが直りました。
|
1 2 3 4 5 6 |
@media screen and (min-width:0px){ body { margin-left: 20px; margin-right: 20px; } } |
一度メディアクエリで画面サイズ指定したら、きちんと全サイズ分指定しないと利かないのかな？？
とりあえず、これで解決したので書いておきます。
