Html 使用链接媒体属性加载条件样式表失败

当设备或浏览器的宽度小于1024时，我想加载/获取style-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的文件，使其仅在媒体属性条件下加载？

标记中的

媒体属性不能这样做。我的答复如下：

浏览器不能假设它永远不会匹配媒体查询，因此它必须加载样式表，以防它与媒体查询匹配，并因此使用样式表。这消除了与延迟加载相关的任何网络延迟，该延迟会导致类似于FOUC的问题，即当浏览器等待样式表加载后才可以使用时，内容在几分之一秒（或者，如果连接变得非常不稳定，则在数秒）内看起来不正确

您可以通过将媒体查询移动到JavaScript调用并在匹配媒体查询时将样式表添加到页面来解决此问题，但这意味着样式表需要JavaScript才能工作。
标记中的
媒体属性无法做到这一点。我的答复如下：

浏览器不能假设它永远不会匹配媒体查询，因此它必须加载样式表，以防它与媒体查询匹配，并因此使用样式表。这消除了与延迟加载相关的任何网络延迟，该延迟会导致类似于FOUC的问题，即当浏览器等待样式表加载后才可以使用时，内容在几分之一秒（或者，如果连接变得非常不稳定，则在数秒）内看起来不正确

您可以通过将媒体查询移动到JavaScript调用并在媒体查询匹配时将样式表添加到页面来解决此问题，但这意味着样式表将需要JavaScript才能工作。
对
rel=“”
属性执行声明性获取请求，值为
preload
。阅读Mozilla以获得详细解释。
在
rel=”“
属性上实现一个声明性的fetch请求，其值为
preload
。阅读Mozilla以获得详细解释。
它总是被加载的，只有在满足您的媒体查询时才应用（如果不总是加载，如果有人上下调整屏幕大小会发生什么情况-每次您进入和退出查询时都必须不断重新加载）。为什么不把媒体查询放在主样式表的末尾呢？减少一个http请求，从而加快页面速度。如果您只希望在满足媒体查询时下载，则需要使用js动态加载，但不建议这样做，因为您会发现FOUCIt总是加载的，仅在满足媒体查询时应用（如果有人在屏幕不总是加载的情况下上下调整屏幕大小，会发生什么情况？每次你进出查询时，屏幕都必须不断重新加载）。为什么不将媒体查询放在主样式表的末尾？少一个http请求可以加快页面速度。如果您只想在满足媒体查询时下载，则需要使用js动态加载，但不建议这样做，因为您将获得FOUC