當媒體查詢有很多時不起作用

Question

當我寫媒體並檢查後 - 它的工作原理！但是當我編寫5-6個媒體查詢，並且在我檢查它們之後，它們不起作用！

我試了下代碼：

@media screen and (max-width: 1280px) and (max-height: 1024px) {...} 

@media screen and (max-width: 1366px) and (max-height: 768px) {...} 

@media screen and (max-width: 1400px) and (max-height: 1050px) {...} 

@media screen and (max-width: 1440px) and (max-height: 900px) {...} 

這裏，在StackOverflow上，我看到後我一樣，用代碼：

@media screen and (max-width: 1920px), screen and (max-height: 1080px) {....} 

但它不工作過。問題是什麼？

UPDATE

我用它在IE8與JS插件respond.js和CSS3，mediaqueries.js

Answer 1

我有這方面的工作...雖然得到確切的窗口，每個觸發器是棘手。

---

編輯： 媒體查詢的順序是非常重要的 - 和你有重疊的高度和寬度，你會在痛苦的世界。如果你顛倒你的查詢順序，你會得到更多的工作。

記住最後一條匹配規則會贏。

如果你有在裏面互相盒

，獲得訂單的權利，你會被罰款

，如果你有重疊的盒子，將有，當你希望沒有得到針對性的區域。

---

你最好先行移動，在寬度和高度上使用MIN而不是MAX。你也可以更好地根據你的內容選擇你的斷點，而不是根據任意的屏幕渲染 - 因爲在那裏有很多你永遠不會得到它們。

http://codepen.io/elliz/pen/lynEt

<div class="a"> 
    Test<br> 
    width = <span class="w">resize me</span><br> 
    height = <span class="h">resize me</span> 

    <p>Breakpoints:</p> 
    <ul> 
    <li>500w 500h - red (go to 499w, 499h to see)</li> 
    <li>600w 400h - green (go to 599w, 399h to see)</li> 
    <li>700w 550h - gold (go large to see)</li> 
    </ul> 
</div> 

.a { 
    font-family: sans-serif; 
    padding:10px 20px; 
    font-weight: bold; 
    background-color: cornflowerblue; 
} 

@media screen and (max-width: 700px) and (max-height: 550px) { 
    .a {background: goldenrod;} 
} 

@media screen and (max-width: 600px) and (max-height: 400px) { 
    .a {background: green;} 
} 

@media screen and (max-width: 500px) and (max-height: 500px) { 
    .a {background: red;} 
} 

// requires jQuery 
$(window).resize(function(){ 
    showsizes(); 
}); 

$(window).ready(function(){ 
    showsizes(); 
}); 


function showsizes(){ 
    var w = $(window); 
    $(".w").text(w.width()); 
    $(".h").text(w.height()); 
}