媒体查询不适用于指定查询

Question

When I set my style for a certain detect type, instead of using that media style at the designated media detected width, it uses it as a parent value which I don't understand why it's doing that.

Fiddle without said style applied: http://jsfiddle.net/T6Sk4/ works normally

Fiddle with it applied to specific width: http://jsfiddle.net/T6Sk4/1/ hmm..

@media (min-width: 320px) {
    #contain {
        width:300px;
    }
    .box {
        display:none;
    }
}
@media (min-width: 480px) {
    #contain {
        width:460px;
    }
}
@media (min-width: 600px) {
    #contain {
        width:580px;
    }
}
@media (min-width: 760px) {
    #contain {
        width:740px;
    }
}
@media (min-width: 900px) {
    #contain {
        width:880px;
    }
}
@media (min-width: 1038px) {
    #contain {
        width:980px;
    }
}

Answer 1

Ok. Change your code for 480px with the following code. It is working fine in all the screens without the 320px screen. I have tested. So try this and let me know:

@media only screen and (min-width: 480px) {
 #contain {
    width:460px;
 }
.box {
    display:block;
 }
}

Also you should use your code like this way @media only screen and (min-width:480px){} for all the screens. If don't understand check my code.

Answer 2

最小宽度大于320px像素，因此每次匹配时都会应用每个媒体查询。

Answer 3

if you want to improve performance and readability, add max-width values too. At the moment, all of your rules are used on large screens, overwriting the same rule quite often. The second benefit: you know exactly which rule applies.