css - 仅在加载时加载带有媒体宽度查询的 css 文件。

Question

我不想根据初始窗口大小为任何网页加载正确的 css 文件。

我目前正在包含这样的文件:

<link rel="stylesheet" media="(max-width: 1250px)" href="file1.css">
<link rel="stylesheet" media="(min-width: 1251px) and (max-width: 1700px)" href="file2.css">
<link rel="stylesheet" media="(min-width: 1701px)" href="file3.css">

此代码在加载时加载了正确的 css，但它也会根据屏幕大小的调整而变化。

有没有一种 CSS 原生方法可以防止响应文件更改？

我可以编写一个脚本来在加载初始 CSS 后删除未使用的查询，但我想知道是否有更原生的方法。

谢谢!

Answer 1

你不能。 matchMedia专门为此创建的 JS 属性。使用匹配媒体，您可以仅在满足特定媒体查询条件时执行 JavaScript block 。例如:

if (window.matchMedia('(max-width: 1250px)')){
  document.write('<link rel="stylesheet" 
                  href="file1.css">');
}