为不同的浏览器窗口大小选择不同的CSS样式表？

我的div（#box）位于浏览器窗口的中间位置，对于600px垂直或更高的浏览器来说，它很常见。 如果窗口小于该窗口，则div顶部的内容会被剪掉，滚动条仅向上滚动页面（当我向下拉动滚动条时），因此无法看到隐藏在顶部边缘上方的任何内容。即使滚动条位于其最顶部位置，窗口也是如此。

以下是我将div放在中心的方法 – 你可以看到为什么div的顶部会在较小的浏览器窗口中被切断。

{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;} 

（即使在最宽的屏幕上也可以容纳动画 – 宽度不是问题。）

这是一个要查看的页面： http ： //ianmartinphotography.com/test-site/
我的CSS： http ： //ianmartinphotography.com/test-site/css/basic.css

这很容易在我的CSS样式表中修复，但似乎我不能同时使用大于600px的监视器和小于600px的监视器。

那么，如何检测浏览器窗口大小，然后选择两种不同的CSS样式表中的一种？ 一个用于小窗户，另一个用于较大的窗户？ 是否有一个jquery脚本可以为我做这个？

或者，是否有另一种方法可以让我的div中心位于浏览器窗口的中间，使用CSS可以滚动，以便在较小的浏览器窗口上访问div的顶部？

谢谢你的想法！

Answer 1

@media查询是我的偏好（看到你不喜欢它们作为解决方案本身），但他们真的可以做到这一点 – 特别是如果你调整你的CSS稍微适应。

  small-device.css = div.container { ... height:500px; margin:50%; ...}  big-device.css = div.container {... height:600px; margin:50%; ...} 

通过消除绝对定位并利用正常的文档流程，您可能还会有更多的运气。 它可以帮助你添加{ overflow-y:scroll; } 那些隐藏的屏幕高度div。

我想最后，如果你试图围绕手持设备进行设计，你需要在某种程度上进行媒体查询。 我的Android屏幕（例如）有3个显示选项（低，中，高def）。 所有3个裁剪页面都不同。

Answer 2

您可以通过Jquery确定窗口大小

 $(window).width(); $(window).height(); 

要么

 $(document).width(); $(document).height(); 

然后改变CSS

 $("link").attr("href", "blue.css"); 

像这样的东西：

 $(document).ready(function(){ if($(document).height() > 600 or $(window).height() > 600){ $("link").attr("href", "600+.css"); } else { $("link").attr("href", "600-.css"); } }); 

Answer 3

适用于所有主流浏览器的解决方案。 不需要JS。 当内容大于视口时，垂直/水平居中，可滚动，粘到顶部。

HTML：

 
[your content goes here] 

CSS：

 html, body { width: 100%; height: 100%; } html { display: table; } body { display: table-cell; vertical-align: middle; } #body { margin: 0 auto; } 

不要忘记应用最后一条规则，它实际上会执行水平居中。

Answer 4

刚做了一些谷歌搜索，发现了这个：

http://www.ilovecolors.com.ar/detect-screen-size-css-style/

那对你有用吗？

Answer 5

尝试Less CSS Framework： http ： //lessframework.com/ ，

您不需要JavaScript，而是可以使用CSS @Media根据分辨率/屏幕大小设置样式。

祝你好运

Answer 6

使用以下JavaScript条件来检测屏幕大小。

function x()将处理在标记中插入CSS链接。 您需要做的就是调用该函数并传入CSS文件名。

 < script type = "text/javascript" >  < /SCRIPT> 

Answer 7

如果“document_height”不起作用，请尝试“window_height”我在代码中注释它！

$("link").attr("href", "css_file_path"); //这里必须插入你的css路径，在下面的代码中替换它