僅在加載時才加載具有媒體寬度查詢的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">'); 
}