メディアクエリにmin-widthとmax-widthを混在させてはいけない

拡大表示した際に、スキマができてしまう

結論から言うとメディアクエリにmin-widthとmax-widthを混在させると、ブラウザの拡大表示時に、適用されるメディアクエリと、メディアクエリの間にスキマができてしまいます。

スキマができる理由

例えば、「min-width:501px」と「max-width:500px」というメディアクエリを書き、ブラウザの拡大率110%で表示した場合で説明します。

まず、ブラウザで拡大表示した場合には、メディアクエリに指定したサイズに拡大率を乗算した値が、メディアクエリとして解釈されるようです。これを前提に、それぞれのブレイクポイントを計算すると

501px × 110% = 551.1px
500px × 110% = 550px

となります。つまり、ウィンドウの幅が551pxの時に、適用されるスタイルのスキマができてしまいます。

下記のサンプルで見てみます。

test.html

<style type="text/css">
　　@media screen and (min-width:501px) {
　　　　.red_or_blue {
　　　　　　background-color: red;
　　　　}
　　}
　　@media screen and (max-width:500px) {
　　　　.red_or_blue {
　　　　　　background-color: blue;
　　　　}
　　}
</style>
<div class="red_or_blue">wide</div>

幅550pxの場合

幅５５２pxの場合

幅551pxの場合

幅551pxの場合にスタイルが適用されていないのがわかります。

まとめ

メディアクエリにmin-widthとmax-widthを混在させることは避けましょう。
そもそも、そんな書き方はする必要ないのでやらないとは思いますが。今回、業務で古いサイトを触る機会があり、それが上記のような指定をされていて、事象が発生していることに気がつきました。