我想在设备或浏览器的宽度小于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的宽度加载，从而仅在媒体属性条件下加载？
答案 0 :(得分：1)
您不能使用标记中的media属性来执行此操作。从我对another question的回答：
浏览器无法假设它从不匹配媒体查询，因此它必须加载样式表，以防它确实与媒体查询匹配，并且必须使用样式表。这样可以消除与延迟加载相关的任何网络延迟，这些延迟会引起类似于FOUC的问题，在这种情况下，内容在几分之一秒内看起来都不正确（或者，如果连接真的很杂乱，则是几秒钟），因为浏览器在样式表可以使用之前等待加载。
您可以通过以下方法解决此问题：将媒体查询移至JavaScript window.matchMedia()调用，并在匹配媒体查询时将样式表添加到页面中，但这意味着样式表将需要JavaScript才能工作。
答案 1 :(得分：1)
对rel=""属性执行声明性的获取请求，其值为preload。阅读Mozilla docs了解详细说明。