@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を見ると、最初に

body {
margin-left: 20px;
margin-right: 20px;
}

を指定した上で、

@media screen and (min-width:783px){
body {
margin-left: 30px;
margin-right: 30px;
}
}
@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を指定した方が良いという記事もあって、そのようにしてみたけど症状は変わらず。

試しに、以下を追加したらデザインが直りました。

@media screen and (min-width:0px){
body {
margin-left: 20px;
margin-right: 20px;
}
}

一度メディアクエリで画面サイズ指定したら、きちんと全サイズ分指定しないと利かないのかな??

とりあえず、これで解決したので書いておきます。