0

大画面でのみ特定の要素を表示するために、次のコードを使用しています。

.forkit, .forkit-curtain {
  display: none;
}

@media only screen and (min-width: 1400px) {
  .forkit, .forkit-curtain {
    display: block;
  }
}

ただし、画面が1300pxの場合、要素は表示され、幅が1250pxの場合にのみ非表示になるため、メディアクエリのmin-width 1400pxは、少し小さい画面サイズでも機能します。これは悪い動作です。

メディアクエリの画面サイズが悪くなっている理由がわかりません。何が起こっている？

ありがとう

4

1 に答える 1

1

違いは50pxではなく、20pxに近いと思います。さらに、すべてのブラウザーで同じように反応するとは限りません。Chrome と Firefox のブレーク ポイントを比較してみてください。それらが約 20px ずれている場合、違いは次の理由によるものです。

IE、Firefox、および Operaは、メディア クエリにスクロールバーの幅を含めるというW3C 仕様に従いますが、Webkit ブラウザーには含まれません。

したがって、ブラウザーに 1400px でトリガーするように要求すると、ほとんどのブラウザーでは約 1383px でトリガーされます。

現時点では、ブラウザーに同じように処理させることはできないため、メディア クエリの幅にあまり密接に結び付けられないようにレイアウトを変更するのが最善の方法です (余分なマージンを追加します)。このようなレイアウトでは、数ピクセル早くまたは遅くトリガーしても、それほど大きな違いはありません。

于 2013-02-19T13:46:13.703 に答える