多個@media標記不起作用

Question

@media only screen and (min-width: 767px) and (max-width: 2000px) { 
     html { background-color: green; } 
    } 

    @media only screen and (min-width: 481px) and (max-width: 766px) { 
     html { background-color: green; } 
    } 

    @media only screen and (min-width: 321px) and (max-width: 480px) { 
     html { background-color: green; } 
    } 

    @media only screen and (max-width: 320px) { 
     html { background-color: green; } 
    } 

    html { 
     background-color: blue; 
    } 

我正在使用opera，1920x1080屏幕。第一個@media標記起作用，當歌劇在100％縮放時，背景變爲綠色。

將縮放比例改爲90％會使背景藍色......即使在10％變焦時，它仍然保持藍色。爲什麼？

第一個@media標籤似乎正在工作，其他則沒有。即使如此，第一個標籤也不能正常工作（90％* 1080px> 767px;因此在90％縮放時顏色應該是綠色，但不是）。

Answer 1

移動你的單HTML定義頂端，你還可以減少媒體查詢只使用最高

html { 
     background-color: blue; 
    } 

    @media only screen and (max-width: 2000px) { 
     html { background-color: green; } 
    } 

    @media only screen and (max-width: 766px) { 
     html { background-color: red; } 
    } 

    @media only screen and (max-width: 480px) { 
     html { background-color: black; } 
    } 

    @media only screen and (max-width: 320px) { 
     html { background-color: white; } 
    } 

http://jsfiddle.net/Y5tLf/