CSS 媒体查询加载

【问题标题】：CSS Media Query loadingCSS 媒体查询加载
【发布时间】：2012-01-24 10:18:14
【问题描述】：

如果我有如下 CSS 媒体查询

<link rel="stylesheet" media="only screen and (max-width:1024px)" href="css/ipad.css">
<link rel="stylesheet" media="only screen and (min-width:1024px)" href="css/desktop.css">

我看到它同时加载了 CSS desktop.css 和 ipad.css

即使我将最小/最大宽度更改为最小/最大设备宽度也是如此

为什么会这样？如何确保只加载相关的 CSS？

【问题讨论】：

您的目标浏览器/设备是什么？哦，关闭你的链接标签。

标签： css media-queries

【解决方案1】：

我说，浏览器加载这两个文件是正常的。但它应该只应用一种风格。发生了什么事，是两种样式都应用了，还是只应用了一种？

您也可以使用 orentation 参数 btw。

【讨论】：

它适用正确..我的问题是为什么它会同时加载它们！
因为这是浏览器工作的正常行为。即使是仅用于打印的 CSS 文件也会自动加载，但仅在用户切换到打印视图时应用。