根據瀏覽器窗口大小應用不同的CSS樣式表 - 我找不到任何確定的東西

Question

請幫助我，如果你這么善良......

我有一些困難指出如何最好地解決這個問題，因為谷歌的新算法對我的（點對點）搜索術語不是很有幫助。

我的網站是100％流暢的寬度，我需要為1152/1024及以下的用戶更改樣式表。 我開始使用以下jscript來檢測分辨率並應用這些新的樣式表，但它在IE中不起作用 - 很棒。

我理解基於實際瀏覽器窗口的樣式表是最好的，但內容的最大寬度為1280px，因此我希望不會影響具有最小化窗口的巨大分辨率，我懷疑用戶是否會費心去減少他們的窗口他們在1024及以下的分辨率。

這是我當前的代碼放在頭部：

<script type="text/JavaScript">
var screenwidth = screen.width;
if (screen.width < 1280){
document.write('<link rel="stylesheet" href="/Assets/Templates/Common/Public/1024res.css" type="text/css" media="screen" />');
}
</script>

所以，我的問題是：1）為什么這不適用於IE？ 2）這是最好的路線，特別是考慮到jscript可能被禁用？ 有誰知道如何最好地實現這一目標？

任何幫助 - 非常感謝！

Answer 1

非JavaScript方法：

<link rel="stylesheet" media="screen and (min-device-width: 1152px)" href="800.css" />

請參閱： http ： //css-tricks.com/resolution-specific-stylesheets/