css - 移动设备上的流体设计

Question

我正在尝试为移动网站编写“半流体”项目，需要一些帮助。

我要做的是在垂直或水平查看时重新对齐布局。

垂直看应该是...

横版应该...

Answer 1

虽然这是一个相当基本的示例，但您可以简单地在屏幕超过一定大小时将元素浮动。这是使用媒体查询完成的。您可以在 CSS3 中分配媒体查询，并可以在此处找到文档。

@media (max-width: 600px) {
    #green, #red {
        float: none;    
    }
}

这是简单解决方案的jsFiddle。