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

Question

我的 div (#box) 位于浏览器窗口的中央，这对于垂直高度为 600 像素或更高的浏览器来说非常合适。如果窗口小于该窗口，则 div 顶部的内容会被剪切掉，滚动条只会向上滚动页面(当我向下拉滚动条时)，因此不可能看到隐藏在顶部边缘上方的任何内容即使滚动条位于其最顶部的位置，窗口也会显示。

这是我将 div 居中的方法——您可以看到为什么 div 的顶部在较小的浏览器窗口中被 chop 。

{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 脚本可以为我执行此操作？

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

谢谢你的想法!

Answer 1

@media 查询是我的偏好(看到你不喜欢它们本身作为解决方案)，但它们确实可以解决问题 - 特别是如果你稍微调整你的 css 以适应。

<link...media="only screen and (max-height: 600px)" href="small-device.css" />
    small-device.css = div.container { ... height:500px; margin:50%; ...}

<link...media="only screen and (min-height: 601px)" href="big-device.css" />
    big-device.css = div.container {... height:600px; margin:50%; ...}

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

我认为最后，如果您尝试围绕手持设备进行设计，则在某种程度上需要媒体查询。我的 Android 屏幕(例如)有 3 个显示选项(低、中、高清)。所有 3 个裁剪页面都不同。