私は次のメディアクエリルールを持っています：
@media only screen and (max-width: 854px), only screen and
(max-device-width: 854px)（デバイス<= 854pxの場合）
@media only screen and (min-width: 855px), only screen and
(min-device-width: 855px)（デバイス> 854pxの場合）
奇妙なことですが、Chrome（および他のブラウザの場合もあります）はこのルールを同時に使用します（たとえば、幅が800pxの場合）（画面を確認してください）。どうしたの？
を使用しているため、これらは同じルールにフォールバックしていますdevice-width。この条件はdevice-width、デバイスの物理的な幅をターゲットにしているため、その条件が満たされた場合、適用されるルールはそれだけです（ブラウザーのサイズを任意の幅に変更したかどうかは関係ありません）。device-widthメディアクエリから両方の条件を削除します。これで問題が解決するはずです。
device-widthとの違いの詳細については、次のwidthリンクを参照してください：http ://www.w3.org/TR/css3-mediaqueries/#media1
ありがとう、スヴィ。
ブラウザの幅を変更して（画面の解像度を変更するのではなく）、メディアクエリルールをテストしていました。ブラウザの幅が 854px 未満だったため、次のルールが適用され@media only screen and (max-width: 854px)ました。画面の解像度が 854px を超えていたため、次のルールが適用されました -only screen and (min-device-width: 855px)