我在一个页面中包含2个样式表，一个是总是需要的移动版本。在更大的屏幕上，我还想加载desktop.css。所以我把桌面样式链接起来，所以:
<link href="/css/desktop.css" rel="stylesheet" media="all and (min-width: 780px)" />
我认为浏览器应该足够聪明，只在大屏幕上下载desktop.css。它总是加载它。
是否可以在媒体查询不满足时阻止浏览器下载?
不可能。对于媒体查询，资源仍然被下载(尽管通常优先级较低)，但不应用。
即使在media=print中也是如此。确切的原因我不清楚，但在这个问题上有一个简短的讨论，表明它破坏了太多的网站-网站可能检查媒体查询在CSSOM中，即使他们不匹配。这个问题澄清了链接rel=“preload”在下载方面确实尊重媒体查询，但那里的破坏风险较小(预加载只是一个优化提示)。
不匹配的媒体查询被下载(而不是渲染阻塞)的事实实际上形成了一个hack的基础来加载CSS异步与以下代码:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">