仅在加载时才加载具有媒体宽度查询的CSS文件。

Question

我不想为基于INITIAL窗口大小的任何网页加载正确的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属性。只有满足特定的媒体查询条件时，才能使用matchmedia执行JavaScript块。例如：

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