css - ユーザーがブラウザウィンドウを縮小したときに、2つ以上の水平divを垂直divにスタックするにはどうすればよいですか？

Question

同じ行に2つのdivがあり、それぞれの幅は50％で、フロートは左です。ユーザーがスマートフォンからページを表示している場合は、積み重ねてほしい。現在、ブラウザウィンドウが300pxに狭められている場合や、スマートフォンから表示されている場合でも、divは同じ行に残ります。

Answer 1

メディアクエリはその方法です。モバイル ファーストのアプローチを採用し、メディア クエリを追加してデザインをスケールアップします。つまり、divがフローティングではない状態から開始し、画面の領域が特定のサイズに達したらフロートと幅を追加します。

<!-- HTML -->
<div class="wrapper">
    <div class="column">
        <p>This is column 1</p>
    </div>
    <div class="column">
        <p>This is column 2</p>
    </div>
</div>

---

/* CSS */
.wrapper {
    /* Ensure wrapper contains the columns, even when they are floated, by
       creating a new Block formatting context */
    overflow: hidden;
}

.column {
    /* Ensure we have some margins when the columns are collapsed, or 
       other content is displayed below. */
    margin-bottom: 2em;
}

/* Edit the min-width condition to match your desired breakpoint. */
@media screen and (min-width: 400px) {
    .wrapper .column {
        width: 50%;
        float: left;
    }
}

ここのライブデモ: http://jsfiddle.net/jPgWL/

Answer 2

メディア クエリを使用します。

@media screen and (min-width: 321px) {
  #wrapper {width: 100%;}
  .content {
    width: 50%;
    float: left;
  }
}
@media screen and (max-width: 320px) {
  #wrapper {width: 100%;}
  .content {
    width: 100%;
    float: none;
  }
}