在纵向模式下展开，在横向模式下仅使用 CSS 折叠答案

【问题标题】：Expand on portrait mode, collapse on landscape mode using CSS only在纵向模式下展开，在横向模式下仅使用 CSS 折叠
【发布时间】：2016-12-13 19:20:32
【问题描述】：

我有这个代码：

<div class="wrapper">
 <div class="left">content left</div>
 <div class="right">content right</div>
</div>

我的目标是让两个 div 在 iphone 处于纵向模式时扩展 100% 以覆盖整个宽度，但在横向模式下折叠到 50%，以便它们都适合同一行。这是我的 CSS：

.wrapper {width:100%;height:auto;}

.left, .right {float:left;width:auto;}

这行不通。你是怎么做到的？

【问题讨论】：

你可以使用媒体查询css。查看此链接了解详情https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
您介意再详细说明一下吗？
问题是 div 要么在两种模式下完全展开，要么完全折叠。我只需要它们在纵向模式下展开，因此一个在另一个下方占据整个宽度，而在横向上它们应该分别覆盖 50% 并在同一行对齐。
他的链接已损坏，我希望能提供更多这样的示例信息。对于媒体查询，您的意思是@media 只显示任何内容？

标签： ios css css-float landscape-portrait

【解决方案1】：

您需要的是屏幕方向的媒体查询。见MDN。

/* assume portrait mode; everything set to the default */
.wrapper {width:100%;height:auto;}
.left, .right {width:auto;}

/* in landscape mode however, display left and right side by side */
@media all and (orientation: landscape) {
  .left, .right {float:left; width:50%;}
}

<div class="wrapper">
 <div class="left">content left</div>
 <div class="right">content right</div>
</div>

【讨论】：