css 根据纵向或横向屏幕尺寸扩展? [英] css expanding based on portrait or landscape screen size?

问题描述

我有两个相邻的 div.当您在纵向模式下查看它时，我希望它的宽度为 100 像素，而在横向模式下则为 200 像素.这实际上发生在移动设备上观看.

I have two divs that are floating next to each other. What i would like is to have it have a width of 100px when you are looking at it in portrait mode and lets say 200 px in landscape. This happens viewing on a mobile device actually.

所以 div 在横向模式下会扩大，在纵向模式下会缩小一点.

So the div will expand when in landscape mode and shrink up a bit in portrait.

有什么想法吗?

推荐答案

这在 CSS2 中是不可能的，但是可以用 Javascript 做你想做的事(读出屏幕大小等).

Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).

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

I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.

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

With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):

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

查看这个示例页面以获得更多解释，或这个.

Check out this example page for more explanation, or this one.

编辑仅仅因为我今天发现了这个页面:Hardbroiled CSS3 Media Queries - 写得很好.

EDIT Just because I found this page today: Hardbroiled CSS3 Media Queries - very good writeup.

这篇关于css 根据纵向或横向屏幕尺寸扩展?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！