javascript - ウィンドウ サイズに基づいて列数を変更する

Question

CSS のみを使用してレイアウトを変更することは可能ですか? ウィンドウのサイズが < x の場合、幅 100% の 1 つの列にテキストがあり、ウィンドウ >= x の場合は、各幅が 50% に設定された 2 つの列になりますか?

例えば：

1 つの列:

first part of the example text
second part of the example text

2 つの列:

first part of the                 second part of the
example text                       example text

Answer 1

メディアクエリで試す - DEMO

div {
    border: 1px solid #c00;
}

@media only screen and (min-width: 481px) {
    div { 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        float: left;
        width: 50%; 
    }
}​

Answer 2

column-count:まず、CSS3プロパティを使用できます。
特別な画面幅の条件で、JavaScript を使用して列クラスを追加します。

Answer 3

これは、画面サイズに応じて異なるスタイルシートを配信するメディア クエリで行うことができます。

HTML:

<div class="col1">Lorem ipsum  ... interdum mi.</div>
<div class='col2'>Integer varius,  ... sagittis dolor.</div>​

CSS:

@media (max-width: 500px) {
    .col1, .col2 { width: 45%; float: left}
}

http://jsfiddle.net/FKSkv/1/