html - 根据浏览器窗口大小应用不同的 CSS 样式表——我找不到任何确定的东西

Question

如果你这么好心，请帮助我......

我很难确定如何最好地解决这个问题，因为 Google 的新算法对我的(准确的)搜索词帮助不大。

My site是 100% 流体宽度，我需要为 1152/1024 及以下的用户更改样式表。我开始使用以下一段 jscript 来检测分辨率并应用这些新样式表，但它在 IE 中不起作用 - 太棒了。

我知道基于实际浏览器窗口的样式表是最好的，但内容的最大宽度为 1280 像素，因此我希望最小化窗口的大分辨率不会受到影响，但我怀疑用户不会费心去最小化如果他们的分辨率为 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/