非平凡的响应式设计布局技术（即四处移动）

Posted 2023-03-06

【中文标题】非平凡的响应式设计布局技术（即四处移动）

【英文标题】：Non-trivial responsive design layout techniques (i.e., moving things around)

【发布时间】：2012-05-11 04:11:58

【问题描述】：

在狭窄的视口中清除一列是一项简单的壮举，但我需要移动物体的技巧。我正在尝试调和一对差异很大的移动和桌面模拟。桌面模拟包含一个 3 列网格，该网格应该在移动视图中折叠成一列网格，然后隐藏一些元素并重排其他元素。

使用display: none 隐藏元素是微不足道的。对我来说，困难的部分是将元素从列中分离出来并将它们移动到整个地方，就像http://bostonglobe.com/。从 Firebugging 他们的布局中，我发现您可以通过操纵浮动来颠覆源顺序，浮动可能会被重置并通过移动视口中的媒体查询清除元素。这是在折叠视图中使中间列（在 3 列网格中）在其他 2 列内容下方清晰的一种方法。

这就是纯 CSS 响应式重排布局的程度吗？还有其他我可以使用的技术（可能使用 javascript）吗？

【问题讨论】：

你能告诉我们更多关于你所期望的行为吗？如果没有考虑到特定的设计，很难指出 CSS 技术。

【参考方案1】：

您无法在那种程度上操纵 DOM...实际上无法重新排序标记。我解决这个问题的方法是复制元素并将其定位在特定视口宽度所需的位置并将其隐藏直到需要它为止。

完全避免这种情况的最佳方法是首先设计移动设备：

http://stuffandnonsense.co.uk/projects/320andup/

【讨论】：

如果第一个容器向右浮动，您实际上可以重排相邻容器的顺序。问题是这种技术非常仅限于使用直接相邻的容器。

非常正确，尽管我认为 OP 承认这一点。有一些插件可以提供更自动化的方法，例如isotope.metafizzy.co（jQuery 插件）。

【参考方案2】：

我认为 float 示例是纯 CSS 所能做的限制，但使用 javascript 你几乎可以做任何事情 - jQuery .append 可用于拉出任何元素并将其放在其他地方；有效地改变 DOM 的顺序和布局。

http://api.jquery.com/append/

但是从性能的角度来看，.append 并不便宜，所以如果可以的话，我会尽量避免它，通过“首先构建移动/小型”。实现它的另一种方法是为不同的屏幕宽度实际使用不同的布局，然后使用媒体查询（不仅仅是 CSS 来隐藏东西，实际上是在 javascript 中，因此“隐藏”的内容实际上不会呈现或包含在代码中直到需要它，所以 DOM 不会挤满未使用/隐藏的元素或不必要的代码）。

【参考方案3】：

Bootstrap 3.0 有 column re-ordering :) 这意味着您可以纯粹使用预先设置的 CSS 类名，为每个媒体查询单独指定列顺序，无需 javascript 或任何时髦的 hack！

来自 Bootstrap 文档的示例：

<div class="row">
  <div class="col-md-9 col-md-push-3">Appears first in code, second in browser</div>
  <div class="col-md-3 col-md-pull-9">Appears second in code, first in browser</div>
</div>