OStack程序员社区-中国程序员成长平台

标题: ios - 在纵向模式下展开，在横向模式下仅使用 CSS 折叠 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 17:12
标题: ios - 在纵向模式下展开，在横向模式下仅使用 CSS 折叠

我有这个代码:

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

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

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

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

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

---

Best Answer-推荐答案

您需要的是屏幕方向的媒体查询。见 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>

关于ios - 在纵向模式下展开，在横向模式下仅使用 CSS 折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38822044/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4