如何使用分辨率相關的css文件？

Question

我有一個網站，根據分辨率應該有不同的風格。

My code so far。

我想檢查window.innerWidth作爲我的文檔正在加載和使用small.css當寬度小於1024px。否則我想使用large.css。

任何想法？

Answer 1

通過您的Javascript代碼動態加載所需的CSS文檔。

編輯：更復雜的源代碼：

var srcURL; 

if(resolution1) 
    srcURL = "path/small.css"; 
else 
    srcURL = "path/large.css"; 

var style = document.createElement("link") 
style.setAttribute("rel", "stylesheet") 
style.setAttribute("type", "text/css") 
style.setAttribute("href", srcURL) 

document.getElementByTagName("head")[0].appendChild(style); 

Answer 2

媒體查詢。

/* your "big screen" CSS here */ 
@media all and (max-width:1024px) { 
    /* your "small screen" CSS here 
} 

您也可以扭轉這種局面，這取決於你要考慮的「默認」的情況下，瀏覽器不支持媒體查詢其中之一：

/* your "small screen" CSS here */ 
@media all and (min-width:1024px) { 
    /* your "big screen" CSS here 
}