多个@media标记不起作用

@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％缩放时，背景变为绿色。多个@media标记不起作用

将缩放比例改为90％会使背景蓝色......即使在10％变焦时，它仍然保持蓝色。为什么？

第一个@media标签似乎正在工作，其他则没有。即使如此，第一个标签也不能正常工作（90％* 1080px> 767px;因此在90％缩放时颜色应该是绿色，但不是）。

来源

2013-11-21 user2251921

你为什么不尝试调整窗口看到不同的颜色，而不是。试试这个http://jsfiddle.net/99g8N/并调整窗口大小 – Huangism

移动你的单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/

来源

2013-11-21 21:50:09 Huangism

多个@media标记不起作用

回答

相关问题