Why is my CSS media query being ignored?

问题:

Im trying to get this piece of CSS working on my ipad but it seems to be ignoring the media query and using the default wrapper CSS instead. is there a way I can stop this from happening?

@media only screen and (max-width: 1024px) and (max-height: 768px) {
    #wrapper {
        position:absolute; 
        z-index:1;
        top:41px;
        width:150px;
        height:300px;
    }    
}

#wrapper {
    position:absolute; 
    z-index:1;
    top:41px; 
    bottom:0px; 
    left:0;
    width:100%;
    height:800px;
    overflow:auto;
}

回答1:

Aren't your media query styles being overridden by the later values rather than ignored? Have you tried moving the general styles before the MQ ones (I suppose you could also use !important, but that's generally a bad idea), or adding in another obvious style, like background: red; in the MQ one?

回答2:

As a general rule, you should always write your media queries last in your stylesheet, so that the main styles are defined, and then the media queries come and override them at the end.