4

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

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

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

4

3 回答 3

2

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

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

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

于 2012-05-07T20:27:24.547 回答
0

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

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

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

于 2012-05-31T20:08:50.140 回答
0

Bootstrap 3.0 具有列重新排序:) 这意味着您可以纯粹使用预先设置的 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>
于 2013-11-13T21:40:29.203 回答