当设备或浏览器宽度小于1024时，我想加载/获取样式-MW-1024.CSS文件。
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/style-mw-1024.css" />
但是，即使桌面中的加载大于1024宽度，网络中我也能看到style-mw-1024.css文件。
如何防止该文件以大于1024的宽度加载，以便仅在媒体属性条件上加载？
您无法使用标记中的media属性来做到这一点。从我回答另一个问题：
浏览器不能假设它将从不匹配媒体查询，因此必须加载样式表，以防它确实与媒体查询匹配并且必须使用样式表作为结果。这消除了与懒惰加载相关的任何网络延迟，这会导致类似于fouc的问题，其中内容看起来不适合一秒钟的一小部分（或者，如果连接确实很少，则几秒钟）当浏览器在使用之前等待样式表的加载。
您可以通过将媒体查询转移到JavaScript window.matchMedia()调用并在匹配媒体查询时将样式表添加到页面上，这可以解决此问题，但这意味着样式表将要求JavaScript工作。
在 rel=""属性上实现声明的提取请求，值为 preload。阅读Mozilla文档以详细说明。