css解決方案媒體查詢 - **單頁網站**

Question

真的很難與此。希望有人堅持幫我弄明白這一點。

目標：使用CSS調整屏幕上的元素，使我的網站在臺式機和筆記本電腦的所有分辨率上看起來不錯。我需要同時包含寬度和高度，因爲它是一個單頁面網站，僅適用於視口（不向下滾動），而且元素需要適當放置在屏幕上。

我正在使用8個「swaths」分辨率來解釋用戶可能將其窗口拖到的所有視口分辨率。這是我畫的視覺表現。請注意，這些部分的編號與CSS部分的編號相同：http://i1318.photobucket.com/albums/t654/thekevinbanas/pics%20yo/CSSresolutionswaths_zps41ee8742.jpg

我的代碼如下。我在每個標題中標記了一個不同的顏色，以便我可以看到正在使用的代碼。從本質上講，我應該能夠拖動我的視口，以便能夠將標題的顏色更改爲全部8，對嗎？

/* 1 */ 
@media screen and (max-width:1024px) and (max-height:768px) { 
    (green) 
} 

/* 2 */ 
@media screen and (min-width:1025px) and (max-width:1152px) and (min-height:769px) and (max-height:864px) { 
    (white) 
} 

/* 3 */ 
@media screen and (min-width:1153px) and (max-width:1280px) and (max-height:800px) { 
    (black) 
} 

/* 4 */ 
@media screen and (min-width:1153px) and (max-width:1280px) and (min-height:801px) and (max-height:960px) { 
    (blue) 
} 

/* 5 */ 
@media screen and (max-width:1152px) and (min-height:865px) and (max-height:960px) { 
    (yellow) 
} 

/* 6 */ 
@media screen and (min-height: 961px) and (max-width:1280px) { 
    (orange) 
} 

/* 7 */ 
@media screen and (min-width:1281px) and (min-height:900px) { 
    (gray) 
} 

/* 8 */ 
@media screen and (min-width:1281px) and (max-height:899px) { 
    (aqua) 
} 

結果：唯一的顏色我的頭改變，不管大小我拖動視口的淺綠色，綠色和黑色（還有黑色和綠色的，如果沒有代碼是之間的幻象區使用）。

我試着將代碼更改爲@media屏幕而不是@media屏幕，並且最小/最大設備寬度/高度而不是最小/最大寬度/高度（對於所有8個部分）...但是然後只有帶有灰色標題的代碼纔會被使用。我沒有想法。

有人可以解釋發生了什麼？以及如何修復我的代碼以做我想做的事？

Answer 1

瀏覽器可能匹配多個聲明。它將使用它匹配的最後一個，所以改變順序。從最小的開始。

//default 
@media only screen { 
    ... 
} 
//640 x 480 
@media only screen and (max-width:640px) and (max-height:480px) { 
    ... 
} 
//1024 x 768 
@media only screen and (max-width:1024px) and (max-height:768px) { 
    ... 
} 
//1152 x 864 
@media only screen and (max-width:1152px) and (max-height:864px) { 
    ... 
} 
//1152 x 960 
@media only screen and (max-width:1152px) and (max-height:960px) { 
    ... 
} 
//1280 x 800 
@media only screen and (max-width:1280px) and (max-height:800px) { 
    ... 
} 
//1280 x 960 
@media only screen and (max-width:1280px) and (max-height:960px) { 
    ... 
} 
//1280 x 960+ 
@media only screen and (max-width:1280px) and (min-height:961px) { 
    ... 
} 
//1280+ x 899 
@media only screen and (min-width:1281px) and (max-height:899px) { 
    ... 
}