Несколько тегов @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; 
    } 

Я использую оперу, экран 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/