ios - 在纵向模式下展开，在横向模式下仅使用 CSS 折叠
<p><p>我有这个代码:</p>
<pre><code><div class="wrapper">
<div class="left">content left</div>
<div class="right">content right</div>
</div>
</code></pre>
<p>我的目标是让两个 div 在 iphone 处于纵向模式时扩展 100% 以覆盖整个宽度，但在横向模式下折叠到 50%，以便它们都适契约(Contract)一行。这是我的 CSS:</p>
<pre class="lang-css prettyprint-override"><code>.wrapper {width:100%;height:auto;}
.left, .right {float:left;width:auto;}
</code></pre>
<p>这行不通。你是怎么做到的？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您需要的是屏幕方向的媒体查询。见 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#orientation" rel="noreferrer noopener nofollow">MDN</a> .</p>
<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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%;}
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="wrapper">
<div class="left">content left</div>
<div class="right">content right</div>
</div></code></pre>
<p style="font-size: 20px;">关于ios - 在纵向模式下展开，在横向模式下仅使用 CSS 折叠，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/38822044/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/38822044/
</a>
</p>
页:
[1]