CSS3媒体查询不起作用答案

【问题标题】：CSS3 media query not workingCSS3媒体查询不起作用
【发布时间】：2013-08-31 19:05:39
【问题描述】：

我在我的网站上使用以下媒体查询。

<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)" />

我的目的是为不同的设备提供不同的样式表。（目前我只想支持台式机和 ipad）。

但是当我使用 Firefox（版本 8）或 Chrome（版本：15.0.874.106）在我的桌面上加载网站时，它会同时下载 CSS 文件（web.css 和 ipad.css）。

我不太确定我的代码有什么问题。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： html css media-queries

【解决方案1】：

对于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)" />

【讨论】：

这里的问题是，在桌面上，它正在下载两个 css 文件。我想它不应该在桌面上下载 ipad.css，反之亦然。我的假设错了吗？
它不会同时下载两个 css 文件，因为 min-width 是指页面的屏幕大小，而 min-device-width 意味着它在 iphone 和 ipad 等设备中打开时处于活动状态
阅读这篇文章了解更多css-tricks.com/6206-resolution-specific-stylesheets

【解决方案2】：

它可能无法正常工作，但请尝试将值更改为一个数字：

<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】：

支持使用媒体查询的浏览器会下载你所有的样式表，不管它需要显示哪一个。

这些查询将根据分辨率而不是设备为您提供两种不同的布局句柄，但始终会下载两个样式表。

media="screen and (min-width: 768px) and (max-width: 1024px)"
media="screen and (min-width: 1025px)"

【讨论】：