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标签工作，当opera为100％zoom时，背景变为绿色。

将变焦更改为90％会使背景变为蓝色......即使在10％变焦时也始终保持蓝色。为什么会这样？

第一个@media标签似乎正在运行，其他标签则没有。即便如此，第一个标签也无法正常工作（90％* 1080px> 767px;所以颜色应该是绿色，而90％变焦但不是这样。）

Answer 1

将您的单个html定义移至顶部，您还可以将媒体查询减少为仅使用max

    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/

多个@media标签无效

1 个答案: