根據客戶端瀏覽器大小更改.css文件

我想根據客戶端使用的瀏覽器寬度更改.css文件。對於我使用下面的函數：根據客戶端瀏覽器大小更改.css文件

function changeLayout(description) { 
    var i, a; 
    for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) { 
     if (a.getAttribute("title") == description) { a.disabled = false;} 
     else if (a.getAttribute("title") != "default") { a.disabled = true;} 
    } 
}

上述功能正常工作與

<head> 
    <title></title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" title="default" /> 
    <link href="css/style1024.css" rel="alternate stylesheet" type="text/css"  title="style1024" /> 
    <link href="css/style1280.css" rel="alternate stylesheet" type="text/css" title="style1280" /> 
</head>

的問題，我現在面臨的是，在頁面加載時所應用的風格總是默認.css在哪裏作爲我發現的瀏覽器窗口是有1280的寬度。如果我改變了屏幕分辨率然後風格得到適用適當。只有在頁面刷新或加載後纔會應用默認樣式。

任何想法，將不勝感激。

謝謝。

來源

2011-10-06 mitesh shah

使用媒體查詢

CSS：

@media screen and (max-width: 960px) 
{ 
    /* your rules or imports */ 
    @import url('/css/styles.css'); 
}

來源

2011-10-06 11:30:45

根據客戶端瀏覽器大小更改.css文件

回答

相關問題