问题
Added this line in index.html:
<link href="css/style.css" media="all "rel="stylesheet" type="text/css" />
And this is my Media Query CSS:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#mapArea .white span {
width: 100px;
}
}
But when i check it in browser, don't working. What's my problem? How can i fix it?
(Tested all modern browsers)
回答1:
@media only screen has different definition with @media screen.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
Source: http://www.w3.org/TR/css3-mediaqueries/
Maybe you can try change into this:
@media screen and (min-width : 320px) and (max-width : 480px) {
.white span {
width: 100px;
}
}
回答2:
You are querying for device-width, which if your on a laptop or desktop isn't going to fire those queries. Change those to min-width and you should see the query work.
Also, make sure you have a viewport meta tag i.e. <meta name="viewport" content="width=device-width,initial-scale=1.0"> in the <head> of your HTML.
来源：https://stackoverflow.com/questions/17208218/css-media-query-dont-working-in-css-file