javascript - 根据窗口大小更改列数

Question

是否可以仅使用 CSS 更改布局，所以当窗口大小 < x 时，我将文本放在一列上，宽度为 100%，而当窗口 >= x 时，则将其设为两列，每列宽度设置为 50 %?

例如:

一栏:

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

两列:

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%; 
    }
}​