メモ：メディアクエリで「768px未満」と「768px以上」を分ける書き方

レスポンシブWebデザインのコーディングを行う時、HTMLのメディアクエリにて、下記のような設定をしていた。ところが、これだと特定の状況でPC向け/SP向けのどちらのCSSも読み込まれない状況がある事がわかったので、メモ。

例：スマホサイズを768px未満とし、PCサイズを768px以上とする場合

今まで以下のような書き方をしていた。

@media screen and (max-width:767px) {
/* ここにSP向けのCSS指定 */
}
@media screen and (min-width:768px) {
/* ここにPC向けのCSS指定 */
}

ところが、この書き方の場合、ブラウザの拡大率を200%にして、ウインドウ幅を767pxの2倍である1535pxまで広げると、SP/PCどちらの指定も読み込まれないという奇異な状況になってしまうみたい。

これを解決するのが、以下の書き方のようだ。

@media screen and (max-width:767.98px) {/* 変更点。0.02引く。 */
/* ここにSP向けのCSS指定 */
}
@media screen and (min-width:768px) {
/* ここにPC向けのCSS指定 */
}