1

私が持っているとしましょう

/*
css for elements section #1 in page
css for elements section #2 in page
*/

@media screen and (max-width: 960px) {
/* redefines/alters CSS for elements in section #1 in page */
}

@media screen and (max-width: 700px) {
/* redefines/alters CSS for elements in section #2 in page */
}

一致するのは常に1つのメディアクエリだけであるという複数の場所を読みました...したがって、@media screenに既に定義されているCSSに依存することはできず、 @media screenの前に(max-width: 960px)が最初に適用されますおよび (最大幅: 700px)

ただし、ブラウザー ウィンドウのサイズを変更するときのテストでは、@media 画面と (最大幅: 960px)が最初に適用されていることがわかります。次に、ウィンドウのサイズをさらに小さくします@media screen と (max-width: 700px)が適用されると、変更が保持/結合されていることがわかります

だから私の質問は...私が見ているのは純粋な運であり、仕様に反していますか? または、何か不足していますか？

4

3 に答える 3

3

あなたのテストは、それがどのように機能するかを証明します。

あなたの例では、ブラウザの幅が 960px未満および700px未満の場合、両方のクエリが true と見なされます。これは意図したとおりに機能しており、実際、私がいくつかのサイトでレスポンシブ デザインを実装した方法です。各クエリは、物事がスモール フォーム ファクターに適切に分解される方法の新しいブレークポイントです。

于 2013-08-14T14:55:49.820 に答える
2

メディア クエリでは、ソースの順序が重要です。

メディア クエリのロジックを参照してください

あなたの場合、幅 <= 960px の場合、最初のクエリは常に一致します。

その css を除外したい場合は、最小幅の値を追加できます。

于 2013-08-14T14:55:50.273 に答える
0

メディアクエリ自体の要点を理解していないと思います。最初の 960 宣言では、「画面の解像度が 960px 未満の場合はこれらのスタイルを適用する」とあり、700 に達するとそれらのスタイルが適用されます。これは基本的なレスポンシブ デザインです。

于 2013-08-14T14:58:10.320 に答える