css基于纵向或横向屏幕尺寸进行扩展？

Question

我有两个漂浮在一起的div.我想要的是,当你在肖像模式下看它时,它的宽度为100px,让我说在景观中200 px.这实际上是在移动设备上查看.

所以div在横向模式下会扩展,并在纵向缩小一点.

有任何想法吗？

Answer 1

这对CSS2来说是不可能的,但是可以用Javascript做你想做的事情(读出屏幕尺寸等).

我不确定你正在研究什么技术,但CSS3提供了你想要的CSS3媒体查询.

使用CSS3,您可以获得这样的有趣内容(或者您甚至可以指定宽度,例如200px):

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

查看此示例页面以获取更多说明,或者说明这一点.

编辑只是因为我今天发现了这个页面:Hardbroiled CSS3 Media Queries - 非常好的写作.