Only first media query working

问题

When using media queries, only the first set seems to work and I don't know why. If I swap them around, then still, only the first one works. I've tried changing from max-width to min-width, I've tried removing the and condition, I've tried removing all my Javascript. I've tried removing all my CSS, having only the media queries with body {display:none}. The media queries are at the end of my stylesheet. Viewport meta is correct (see below).

None of these attempts corrected my problem. Anyone got any idea why this is happening? I've worked with @media a hundred times and never have I had this problem.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media (max-width: 740px) and (min-width: 420px) {
    .product {
        width:45% !important;
        margin:10px 10px 10px 10px !important;
    }

    .products-container select {
        width:85%;
    }   
}

@media (max-width: 340px) {
    body {
        display:none;
    }
}

Update I've checked FireFox's console. I'm actually getting the following error: Dangling combinator. Ruleset ignored due to bad selector.

I get what it's trying to say, but there's nothing wrong with the queries' syntax.

回答1:

Your media queries as they are now, kick in when the screen has width of

0-340px (second media query) and

420px-740px (first media query)

they don't cater for widths between 340px and 420px.. and also for widths > 740px

But certainly, BOTH media queries are working....

See this FIDDLE

回答2:

Nevermind, figured it out.

There somehow was a hidden character in the CSS. This is odd considering that I typed everything else myself, maybe Dreamweaver put it there? A glitch maybe? Anyway, copying it over to MS Word and pasting it back into Dreamweaver fixed it.

P.S Thanks for your help!

来源：https://stackoverflow.com/questions/17942359/only-first-media-query-working

标签

css

media-queries