幅の変更で表示が消失！「メディアクエリの落とし穴」

こんにちは！WEBデザイナー山本です。
最近、WEBサイトのレスポンシブデザイン制作途中で
「一定の幅だけデザインが全く適用されない状態」という
非常に嫌～な現象に遭いました。

なんとか無事に解決することができたので、改善策を記録しようと思います。悩んでいる方の参考になったらと思います！

あるウインドウ幅でだけなぜかデザインが消失？

まず、どんな状態で発生したのかというと、以下のような時でした。

①ブラウザの表示倍率を上げる
ブラウザの表示倍率を110%、150%などにしてみた時に一部のデザインが消失していて、スタイルシートが効いてませんでした（泣）

②ウインドウ幅をゆっくりと伸縮させたとき
ウインドウの幅を伸縮させて検証していた時に②と全く同じで、スタイルシートが効いてませんでした（泣）

なぜスタイルが消失されるのか、、、？

調べたところ、メディアクエリの指定方法が原因で発生していたことが分かりました。

例えば、下記のようなメディアクエリを設定のときに

@media (max-width: 767px) {
p { font-size: 14px; }
}

/* 767.000...px 〜 767.999...px にはスタイルが設定されていない */
@media (min-width: 768px) {
p { font-size: 16px; }
}

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

そのため、例えば表示倍率が110%の場合
ウインドウ幅 844px ÷ 表示倍率 1.1 = 表示領域幅 767.2727…px
という状態になってスタイルシートが適応されていない状況が発生するのです。

やってみた解決策

メディアクエリの設定をmin-width、もしくはmax-widthに統一することで解決する方法もあるみたいなんですが、この場合だと複数のメディアクエリにマッチする表示領域幅が発生するため、注意が必要です。

私は、メディアクエリの設定に小数を利用することで解決しました。
こんな感じです👇

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

少し力技にはなりますが、この方法であればmin-widthとmax-widthの混在が可能になります。

ブラウザの表示倍率を大きく設定しているユーザーは意外と多く存在するようなので、もし同じ現象で悩んでる方は試してみてくださいね！