根据浏览器窗口大小应用不同的CSS样式表 - 我找不到任何明确的 [英] Apply different CSS stylesheet depending on browser window size - I can't find anything definitive

问题描述

请帮助我，如果你会这么亲切...

我有一些困难指出如何最好地去做这个，因为Google的新算法是' t对我的（现货）搜索字词非常有帮助。

我的网站是100％流体宽度，我需要为1152/1024及以下的用户更改样式表。我开始下面的jscript检测分辨率和应用这些新的样式表，但它不工作在IE - 只是伟大的。

我知道基于实际浏览器窗口的样式表是最好的，但是内容的最大宽度为1280像素，因此具有最小化窗口的巨大分辨率将不会

这是我现在的代码放在头上：

/ p>

 < script type =text / JavaScript> 
 var screenwidth = screen.width; 
 if（screen.width< 1280）{
 document.write（'< link rel =stylesheethref =/ Assets / Templates / Common / Public / 1024res.csstype = text / cssmedia =screen/>'）; 
} 
< / script>所以，我的问题是：1）为什么这不工作在IE？和2）这是最好的路线，特别是考虑jscript可能被禁用？有谁知道如何最好地实现这一点？
 
 
 
任何帮助 - 非常感激。
解决方案
 
非JavaScript方法：
 < link rel =stylesheetmedia = -device-width：1152px）href =800.css/> 
  
请参阅： http://css-tricks.com/resolution-specific-stylesheets/  
 
help me please if you'd be so kind...

I am having some difficulty pinpointing how best to go about this, as Google's new algorithm isn't being very helpful with my (spot on) search terms.

My site is 100% fluid width and I need to change stylesheets for users at 1152 / 1024 and below.  I started off with the following piece of jscript to detect the resolution and apply these new stylesheets, but it doesn't work in IE - just great. 

I understand that a stylesheet based on the actual browser window is best, but the content has a max-width of 1280px, so huge resolutions with minimised window's won't be affected I hope, and I doubt users will bother to minimise their windows if they're on resolutions on 1024 and below.

Here's my current code placed in the head:
<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>
So, my questions are: 1) Why doesn't this work in IE? And 2) Is this the best route, especially considering jscript may be disabled?  Does anyone know how best to achieve this?

Any help - much appreciated!
解决方案
The Non-javascript method:
<link rel="stylesheet" media="screen and (min-device-width: 1152px)" href="800.css" />
See: http://css-tricks.com/resolution-specific-stylesheets/

                        
这篇关于根据浏览器窗口大小应用不同的CSS样式表 - 我找不到任何明确的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！