1

私はアダプティブ Web サイトの設計に取り組んでおり、特定の css メディア クエリを使用して小さな表示幅に合わせています。

私が使用している小さなディスプレイの場合：

@media screen and (max-width: 34em) {}

私が使用しているより大きなディスプレイの場合：

@media screen and (min-width: 34em) {}

これはこれまでのところ非常にうまく機能しています。ただし、両方のメディア クエリのスタイルが混在しているように見えるウィンドウの特定の幅があることに気付きました。(クエリが適用されないということは絶対にありません。) これは確かに特殊なケースですが、おそらく誰かがその特定のウィンドウまたは画面幅でサーフィンをしていて、奇妙なページを表示している可能性があります。したがって、この問題が存在する理由と、それに対して何ができるのか疑問に思っていました。Mac の Safari と Firefox の両方でこれを試しましたが、どちらも同じ効果を示しました。

4

3 に答える 3

4

ただし、両方のメディア クエリのスタイルが混在しているように見えるウィンドウの幅があることに気付きました。(クエリが適用されないということは絶対にありません。)

正しい; 代わりに、両方が適用され、ビューポートの幅が正確に 34 em に等しくなります。その後、カスケードが通常どおり適用されます。説明については、次の質問に対する私の回答を参照してください。

CSS メディアクエリのオーバーラップのルールは何ですか?

2 つの範囲の画面サイズでこれを処理する最も簡単な方法は、カスケードを利用することですが、これまでとは異なります。dwreck08に示すように、一方の画面サイズに対して一般的にルールを記述し、もう一方の画面サイズのメディア クエリのみを含めることです。答えてください。

それ以外の場合、カスケードに依存してスタイルをオーバーライドせずに一度に 1 つのルールのみを適用する場合は、いずれかmin-widthまたはのみを使用し、キーワードを使用max-widthして他のルールでそれを無効にします。not例として、次のいずれかを使用できます。

@media screen and (max-width: 34em) {}     /* Smaller screen sizes */
@media not screen and (max-width: 34em) {} /* Larger screen sizes */

またはこれ：

@media not screen and (min-width: 34em) {} /* Smaller screen sizes */
@media screen and (min-width: 34em) {}     /* Larger screen sizes */

これらのルールは相互に排他的であるため、順序は重要ではありません。not少なくとも、キーワードを理解するブラウザーでは、とにかくメディアクエリをサポートしているすべてのブラウザーが知っている限りです。

この質問に対する私の回答は、上記のリンクのフォローアップであり、別の説明を提供します。

メディアクエリの重複を避けるにはどうすればよいですか?

于 2013-06-18T21:12:04.077 に答える
1

スタイリングには 2 つの可能性しか必要ないようです。したがって、最大幅のクエリを削除して、通常どおりにスタイルを設定して、目的の結果を得ることができるはずだと思います。

  #divName {
  properties: here;
}

@media screen and (min-width: 34em) {
  #divName {
   properties: here;
   }
}
于 2013-06-18T20:29:57.727 に答える
0

おそらく、最小幅と最大幅の両方が 34em であるという事実です。したがって、画面サイズが正確に 34 em の場合、両方のメディア クエリがアクティブになります。

片側の値を 1 em ずつ変更して、それがどのように機能するかを確認する必要があります。

@media screen and (max-width: 34em) {}
@media screen and (min-width: 35em) {}
于 2013-06-18T20:39:29.877 に答える