基于纵向或横向屏幕尺寸的CSS扩展？ [英] css expanding based on portrait or landscape screen size?

问题描述

我有两个div是相邻的。我想要的是它的宽度为100px，当你看着它的肖像模式，让我们说200像素的景观。这发生在实际上在移动设备上查看。

因此，当在横向模式下时div将扩展，而在纵向模式中缩小。

任何想法？

解决方案

这是不可能的CSS2，但它可以做你想要的与Javascript尺寸等）。

我不知道你正在寻找什么技术，但CSS3提供了你想要的。

对于CSS3，你可以有这样的有趣的东西（或者你甚至可以指定width例如200px）：

  / * Portrait * / 
 @media屏幕和（orientation：portrait）{
 / *这里的肖像风格* / 
} 
 / *风景* / 
 @media屏幕和（orientation：landscape）{
 / *这里的风景风格* / 
} 
  

查看此示例页面以获取更多解释，或 EDIT 只是因为我今天找到此网页： Hardbroiled CSS3媒体查询 - 非常好的写法。

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.

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

Any ideas?

解决方案

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.).

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

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.

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

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