Question

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

因此，在横向模式下div会扩展，并在纵向缩小一点。

有什么想法吗？

Answer 1

这对CSS2来说是不可能的，但是可以用Javascript（读出屏幕尺寸等）做你想做的事。

我不确定您正在研究哪种技术，但CSS3可以使用CSS3 Media Queries提供您想要的内容。

使用CSS3，您可以获得这样的有趣内容（或者您甚至可以指定宽度，例如200px）：

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

查看this example page以获取更多说明，或this one。

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

Answer 2

您可以使用css媒体功能＆＃34; orientation＆＃34;来完成此操作。这样，您可以根据屏幕方向指定样式，与屏幕大小无关。您可以找到有关此媒体功能的官方w3.org定义here。结合developer.mozilla.org上的规范，这将解释它是如何工作的。

在w3.org上引用“方向”媒体功能：

'orientation'媒体功能是'肖像'时的值 “高度”媒体功能大于或等于的值 '宽度'媒体功能。否则'方向'就是'风景'。

developer.mozilla.org关于＆＃34;方向的注释/引用＆＃34;特征：

注意：此值（即纵向或横向） 不与实际的设备方向相对应。在大多数设备上以纵向打开软键盘将会导致视口变得比它高，从而导致浏览器使用横向样式而不是纵向。

重申一下，实际上并不是触发纵向或横向媒体查询的屏幕方向。然而，它是屏幕的高度和宽度之间的比例！因此，使用＆＃34;方向功能＆＃34;也是有意义的。因此，我使用非移动/触觉设备添加了一个小型演示来显示这些媒体查询的行为。

JSFIDDLE DEMO （尝试调整视图端口大小）

以下是影响纵向和横向的代表性媒体查询。

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }

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

2 个答案: