有沒有辦法加載關於分辨率的CSS文件？

Question

我有一個非常大的styles.css文件，它的重量爲1,1MB，我需要減小它，因爲它影響我的網站的性能。我打算在許多文件中分發代碼，關於分辨率，我想知道是否有加載少數文件的方法，首先檢查分辨率或設備？， 就像在媒體查詢中使用@import一樣？ 或與JS檢查？ 或html元標記？ 或者首先加載標題樣式然後調用其餘的方法？

Answer 1

你可以通過jquery完成文檔加載事件。

$(document).ready(function(){ 
    if (window.innerWidth >= 1280) //if ($(window).width() >= 1280) 
      $("head").append("<link id='yournewcss1' href='desktop.css' type='text/css' rel='stylesheet' />"); 
    else if (window.innerWidth >= 768 && window.innerWidth < 1280) { 
      $("head").append("<link id='yournewcss2' href='midreso.css' type='text/css' rel='stylesheet' />"); 
    } 
    else if (window.innerWidth >= 320 && window.innerWidth < 768) { 
      $("head").append("<link id='yournewcss3' href='mobile.css' type='text/css' rel='stylesheet' />"); 
    } 
});