メディアクエリを設定していて、スタイルシートの落とし穴にはまったので見直してみた

こんにちは！
8キロの山登りを終え、ブログを書いているジラフです～

さすがに体が疲れているからか眠い…

ということで、今日は難しいブログはおいておいて（笑
私がメディアクエリを設定していてハマった、あれ？なんかこの幅だけレスポンシブなのに
CSSあたってないんじゃない？といった経験の改善策をまとめてみました！

どなたかのご参考になればと思います(*’V’*)

なんの問題もないようなレスポンシブサイト、
でもある一定の幅だけデザインが効いてないときってありませんか？

「CSSが効いてない」状態ってどんなときか検証してみたところ、私の場合は以下の時でした。

①ブラウザの表示倍率を上げたとき
ブラウザの表示倍率を上げ、110%、150%などに拡大したときなんだかスタイルシートが効いてない時がありました。

②ウインドウ幅をゆっくり伸縮させたとき
ある程度のパソコンのサイズを想定してレスポンシブするといいんですが、
そうじゃなくランダムで伸縮させたときは、スタイルシート聞いてない時があったんです。

いろいろ調べていると次のことがわかりました。

例えば次のようなとき

@media (min-width: 767px) {
  p { font-size: 16px; }
}

@media (min-width: 768px) {
  p { font-size: 14px; }
}

この場合ウインドウ表示倍率が100%であれば、767pxの次に大きい表示領域幅は768pxです。
だけど100%より大きい場合は、767.○○pxといった小数を持つ表示領域幅が発生します。

そのため、上記には767.0000…～767.999…px にはスタイルが設定されていないということになります。
これらによって例えば表示倍率が150%の場合

1151px（ウィンドウ幅）×　表示倍率 1.5 = 767.3333…px

となってスタイルシートが適応されていない状況が発生するのです。

メディアクエリの設定をmin-width、もしくはmax-widthに統一することで私自身は解決することができました。
ひとまずはこれでスタイルが効いてないという状況を改善できます。
ただ上記の方法を使用する場合は複数のメディアクエリに合う表示領域幅が発生するのでお気を付けくださいまし！

他にもやり方はあると思いますが、とりあえずは上記のやり方が一番スマートかな？と！

倍率をあげてブラウザを使用しているユーザーは多く存在していると思うので
同じように悩んでいる方のお役にたてれば幸いです！

Creator Note