4

細いビューポートで列をクリアするのは簡単なことですが、物事を移動するためのテクニックが必要です。劇的に異なるモバイルとデスクトップのモックのペアを調整しようとしています。デスクトップ モックには、モバイル ビューで 1 列のグリッドに折りたたまれることになっている 3 列のグリッドが含まれています。これにより、一部の要素が非表示になり、他の要素がリフローします。

要素を非表示にすることは簡単display: noneです。私にとって難しいのは、 http://bostonlobe.com/のように、列から要素を分割してあちこちに移動することです。Firebugging のレイアウトから、float を操作することでソースの順序を覆すことができることがわかりました。float はリセットされ、モバイル ビューポートのメディア クエリで要素がクリアされる可能性があります。これは、折りたたまれたビューで他の 2 列の内容の下にある中央の列 (3 列のグリッド) をクリアにする 1 つの方法です。

これは、レスポンシブにレイアウトをリフローするために純粋な CSS でできることの範囲ですか? 他に使用できる手法 (おそらく JavaScript を使用) はありますか?

4

3 に答える 3

2

その程度までDOMを操作することはできません...実際にマークアップを並べ替える方法はありません。これを回避する方法は、要素を複製し、特定のビューポート幅に必要な場所に配置し、必要になるまで非表示にすることです。

これを完全に回避する最善の方法は、モバイルを最初に設計することです。

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

于 2012-05-07T20:27:24.547 に答える
0

float の例は、純粋な 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 やファンキーなハックは必要ありません!

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 に答える