CSSでメディアクエリの順序が重要なのはなぜですか？

最近、私は反応がよく、頻繁にCSSメディアクエリを使用しているサイトを設計してきました。私が気づいた1つのパターンは、メディアクエリが定義される順序が実際に重要であるということです。私はすべてのブラウザでテストしませんでしたが、Chromeだけでテストしました。この動作の説明はありますか？場合によっては、サイトが正常に動作しないときに、それがクエリであるかクエリが書き込まれる順序であるかが不明なときに、時には不満を募らせます。ここでCSSでメディアクエリの順序が重要なのはなぜですか？

は例です：

HTML

<body> 
    <div class="one"><h1>Welcome to my website</h1></div> 
    <div class="two"><a href="#">Contact us</a></div> 
</body>

はCSS：私は最後に1024x600のクエリを書いた場合

body{ 
font-size:1em; /* 16px */ 
} 

.two{margin-top:2em;} 



/* Media Queries */ 

@media (max-width: 480px) { 
    .body{font-size: 0.938em;} 

} 
/* iphone */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    body {font-size: 0.938em;} 
} 
/*if greater than 1280x800*/ 
@media (min-width: 1200px) { 
     .two{margin-top:8em;} 
      } 
/*1024x600*/ 
@media (max-height: 600px) { 
     .two{margin-top:4em;} 
} 
/*1920x1024*/ 
@media (min-height: 1020px) { 
     .two{margin-top:9em;} 
} 
/*1366x768*/ 
@media (min-height: 750px) and (max-height: 770px) { 
     .two{margin-top:7em;} 
}

しかし、ブラウザは無視しCSSの開始時に指定されたマージン値（margin-top：2em）を適用します。

/* Media Queries - Re-arranged version */ 

@media (max-width: 480px) { 
    .body{font-size: 0.938em;} 
} 
/* iphone */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    body {font-size: 0.938em;} 
} 
/*if greater than 1280x800*/ 
@media (min-width: 1200px) { 
     .two{margin-top:8em;} 
} 
/*1920x1024*/ 
@media (min-height: 1020px) { 
     .two{margin-top:9em;} 
} 
/*1366x768*/ 
@media (min-height: 750px) and (max-height: 770px) { 
     .two{margin-top:7em;} 
} 
/*1024x600*/ 
@media (max-height: 600px) { 
     .two{margin-top:4em;} 
}

私のメディアクエリーの理解が正しい場合は、順序は問題ではありませんが、そう思われます。理由は何でしょうか？

出典

2012-01-09 dsignr

これは、CSS - カスケードスタイルシートの設計によるものです。

それはあなたが同じ要素に衝突する2つのルールを適用する場合は、最初の1は !importantマーカーを持っているか、単に body対 html > body（例えば、より具体的でない限り、それは、宣言された最後のいずれかを選択します、ということを意味

、後者はあまり具体的ではない）。ブラウザウィンドウが350個のピクセル幅である場合

したがって、このCSS

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
} 

@media (max-width: 400px) { 
    body { 
    background: blue; 
    } 
}

を与え、背景が青色になり、一方、このCSS

@media (max-width: 400px) { 
    body { 
    background: blue; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

と同一のウィンドウ幅、背景赤くなります。どちらのルールも実際には一致しますが、最後のルールが適用されるため、2番目のルールは適用されます。最後

、

@media (max-width: 400px) { 
    body { 
    background: blue !important; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

又は

@media (max-width: 400px) { 
    html > body { 
    background: blue; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

と背景は、（350個のピクセル幅のウィンドウで）ブルーであろう。

出典

2012-01-09 16:58:46

ありがとうございます。私はこのような単純な論理が夜のために一緒に私の睡眠を台無しにするだろうと想像しませんでした。ありがとう。 – dsignr

スタイルシートでは、同じルールがメディアクエリなしで適用されてから、小さな画面のモバイルデバイス用のメディアクエリ内に適用され、ダウンロードするイメージがいくつかある場合。何が起こるのでしょうか？ブラウザはメディアクエリなしのルールを無視し、特定のメディアクエリのルールのみを適用しますか？ –

また、より大きなメディアクエリにmin-widthを追加するだけで、順序に関係なく、問題は発生しません。

@media (min-width: 400.1px) and (max-width: 600px) { 
 
    body { 
 
    background: red; 
 
    } 
 
} 
 

 
@media (max-width: 400px) { 
 
    body { 
 
    background: blue; 
 
    } 
 
}

、このコードを使用して、任意の順序で、背景色は常に400.1px-600PX幅の解像度のために赤色になり、常に幅の解像度のために青色になり400px以下です。

出典

2014-11-06 15:58:26

ニース！ありがとうございました。 – dsignr

私はCSSの400.1pxのような値の視野でうんざりしています。 1023px、1025pxなど – Monstieur

CSSでメディアクエリの順序が重要なのはなぜですか？

答えて

関連する問題