为不同的浏览器窗口大小选择不同的CSS样式表? [英] Select different CSS style sheet for different browser window sizes?

问题描述

我的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脚本可以帮我吗?

或者，是否还有另一种方法可以使CSS的div居中于浏览器窗口的中央，从而允许滚动，以便可以在较小的浏览器窗口上访问div的顶部? /p>

感谢您的想法！

我最喜欢

解决方案

@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个裁剪页面都不同.

I have my div (#box) centering in the middle of the browser window which is groovy for browsers that are 600px vertical or taller. If the window is smaller than that, content at the top of the div gets sheared off, and the scroll bar only scrolls the page up (when I pull the scroll bar down), so it's impossible to see anything hidden above the top edge of the window even when the scroll bar is at its top-most position.

Here's how I center my div--you can see why the top of the div gets cut off in smaller browser windows.

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

(It's really wide to accommodate the animation working on even the widest screens--the width isn't an issue.)

Here's a page to look at: http://ianmartinphotography.com/test-site/
And my CSS: http://ianmartinphotography.com/test-site/css/basic.css

This is easily fixed in my CSS style sheet, but it seems like I can't have it both ways for monitors greater than 600px and monitors smaller than 600px.

So, how do I detect a browser window size and then select one of two different CSS style sheets? One for small windows, another for larger windows? Is there a jquery script that will do this for me?

Or, is there another way to make my div center in the middle of the browser window with CSS that will allow scrolling so that the top of the div can be accessed on smaller browser windows?

Thanks for your thoughts!

解决方案

@media queries are my preference (saw that you don't like them as a solution per se), but they really could do the trick - especially if you adjust your css a little to accommodate.

<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%; ...}

You may also have a little more luck by removing your absolute positioning and taking advantage of normal document flow. It would help you to add things like { overflow-y:scroll; } to those hidden-by-screen-height divs.

I think in the end, if you're trying to design around hand-held devices, you'll need media queries to some extent. My Android screen (for example) has 3 display options (low, medium, hi def). All 3 crop pages differently.

这篇关于为不同的浏览器窗口大小选择不同的CSS样式表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！