响应式web设计之CSS3 Media Queries

http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

 

For example:

 

#block1, #block2 {
    float: left;
    width: 100%;
}

@media (min-width: 1000px) {
    #block1, #block2 {
        width: 50%;
    }
}

 

This example shows the 2 blocks on big screens next to each other, while on small screens they will be displayed below each other.