我在我的网站上使用以下媒体查询。
<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)" />
我的目的是为不同的设备提供不同的样式表。 （现在我想只支持桌面和ipads）。
但是当我使用Firefox（版本8）或Chrome（版本号：15.0.874.106）在我的桌面上加载网站时，它会下载两个CSS文件（web.css和ipad.css）。
我不太确定我的代码有什么问题。有人可以帮我这个。
答案 0 :(得分：3)
Desktop你需要写min-width而不是min-device-with这样：
<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)" />
答案 1 :(得分：1)
IT可能无效，但请尝试将值更改为数字：
<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)"
答案 2 :(得分：1)
支持使用媒体查询的浏览器将下载所有样式表，无论它显示哪一个都不幸。
这些查询将根据分辨率而不是设备为您提供两种不同的布局句柄，但始终会下载两种样式表。
media="screen and (min-width: 768px) and (max-width: 1024px)"
media="screen and (min-width: 1025px)"