问题
I am using the following media queries on my website.
<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1025px)" />
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />
My intention here was to have different stylesheets for different devices. (For now I want to support only desktops and ipads).
But when I load the website on my desktop using Firefox (Version 8) or Chrome (Ver: 15.0.874.106) it downloads both the CSS files (both web.css and ipad.css).
I am not too sure what is the wrong with my code. Can someone help me with this.
回答1:
for Desktop you have to write min-width instead of min-device-with like this:
<link rel="stylesheet" href="web.css" media="only screen and (min-width : 1025px)" />
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />
回答2:
IT might not work, but try changing the values down a number:
<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1024px)" />
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1023px)"
回答3:
Browsers that support the use of media queries will download all of your stylesheets regardless of which one it needs to display unfortunately.
These queries will give you two different layout handles based on resolution, rather than device, but both stylesheets will always be downloaded.
media="screen and (min-width: 768px) and (max-width: 1024px)"
media="screen and (min-width: 1025px)"
来源：https://stackoverflow.com/questions/8079036/css3-media-query-not-working