CSS响应式布局的方法

Question

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

我正在使用twitter bootstrap 3.这是我在Portrait模式下需要的布局：

以下是景观模式应该改变的内容：

这是我脑海中的“布局算法”：

• 如果屏幕宽度高于768像素，请使用横向布局，将屏幕分割为2（适用于手机和平板电脑的横向模式）

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

• 否则，显示横向模式，但仅显示图表，并使用按钮显示具有相同选项的叠加层。 （不包括在上面的屏幕截图中。）

现在我的问题：

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

Answer 1

是的，您可以使用CSS3媒体查询。分别检查设备宽度和设备高度。

Answer 2

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

为纵向和横向之间的断点创建CSS媒体查询（例如，这是iPhone上的480px）。这可用于将饼图拉到右侧：

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

然后另一个查询告诉Bootstrap将列堆叠在肖像上：

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

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