根据浏览器窗口大小应用不同的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/