移动设备上的流体设计

Question

我正在尝试编写一个＆＃34;半流体＆＃34;移动网站的项目，需要一些帮助。

我要做的是在垂直或水平观看时重新排列布局。

垂直查看时应该是......

水平应该是......

Answer 1

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

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

以下是简单解决方案的jsFiddle。