html - 尽管未能满足媒体查询，但 css 文件始终加载

Question

我的 index.html 文档头部有以下样式表链接代码:

<link href="static/css/mobile.css" rel="stylesheet" media="screen and (max-width: 739px)">

但是，在我的 1920px 宽屏幕上，chrome 和 firefox 都加载了 mobile.css - 它似乎忽略了内容。它只是将呈现页面所需的时间加倍。

有什么方法可以阻止CSS文件在不满足媒体查询的情况下加载？ (我想我可以接受一些 .js)还是我实现错了？

浏览器加载文件然后忽略它似乎是完全错误的。

Answer 1

恐怕浏览器总是加载媒体查询，即使它们不匹配。您可以在此处阅读更多详细信息:

http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

本文还展示了防止这种情况发生的方法。简而言之，它将是这样的:

1. 您使用 JS 而不是 CSS 的测试查询:window.matchMedia('screen and (max-width: 739px)'); .
2. 然后，如果它匹配，则添加您的 CSS，如:document.write('<link rel="stylesheet" href="small.css">');

实际文章有更好的方法来包含它 document.write , 所以你应该检查一下。