css - CSS响应式布局的方法

Question

免责声明:我不是设计师。我对响应式 CSS 方法知之甚少。对我放轻松!我是一名正在尝试创建采用性布局的开发人员。

我正在使用 twitter bootstrap 3。这是我在纵向模式下需要的布局:

下面是它在横向模式下应该变成的样子:

这是我心中的“布局算法”:

• 如果屏幕宽度大于768px，使用横向布局，将屏幕一分为二(适用于手机和平板的横向模式)

• 否则，如果高度大于 400，则使用纵向布局挤压所有内容以适应。

• 否则，显示横向模式，但仅显示图形，并带有一个按钮以显示具有相同选项的叠加层。 (未包括在上面的屏幕截图中。)

现在我的问题:

• 这可以单独使用 CSS 完成吗？如果是这样，如何？ (纵向模式下的按钮在图表上方和下方移动，而在横向模式下，它们均匀分布。)
• 否则，使用最少的 javascript 实现此响应式布局的最佳方法是什么。

Answer 1

演示 http://www.bootply.com/104401

为纵向和横向之间的断点创建一个 CSS 媒体查询(例如，在 iPhone 上为 480 像素)。这可用于将饼图向右拉:

@media (min-width: 480px) {
    .push{float:right;}
}

然后另一个查询告诉 Bootstrap 将列堆叠在纵向上:

@media (max-width: 480px) {
    .breakpoint{width:100%;}
}

相应地使用push 和breakpoint 类，如Bootply 中所示.