html - レスポンシブ Web デザインでのレイアウト変更時の HTML 要素の順序の切り替え

Question

レスポンシブ Web サイトを構築しています。優れたユーザーエクスペリエンスを実現するために、モバイルからデスクトップにレイアウトを変更する必要があります。具体的には、いくつかの HTML 要素の順序を入れ替える必要があります。

デスクトップとモバイルで HTML 要素の順序を変える必要があります。

モバイル

<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>

デスクトップ用に順序が変更されました

<div class="one">One</div>
<div class="three">Three</div>
<div class="two">Two</div>

これは私が達成したいことの単純化されたバージョンです。プログレッシブエンハンスメントと呼ばれるものだと思います。Web デザインの専門家はどのように html 要素を移動しますか? JavaScriptで？それは正常でしょうか？jQueryプラグインはありますか?

score 12 · Accepted Answer

レイアウトに応じて、これを実現する方法はいくつかあります。デスクトップでは div が横に並んでいて、モバイルでは垂直にスタックされている場合、float とメディアクエリを組み合わせて使用すると、それらを正しい順序で表示できる場合があります。

そうでない場合、最終的なフォールバックは 4 つの div を作成することです。

<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>

次に、メディアクエリを使用して、デバイスに応じて関連する「3」の div を非表示にします。

score 11 · Accepted Answer

Google経由でこの質問に出くわしたため、この質問を復活させましたが、既存の回答は古くなっています。私が最終的に使用したソリューションは、反対票を投じた唯一のソリューションだったので、詳しく説明します。

を使用すると、 /プロパティdisplay:flexを使用して要素を並べ替えることができます。columncolumn-reverse

.container{ display:flex;flex-direction:column }
@media screen and (min-width:600px) {
  .container{ flex-direction:column-reverse }
}

こちらの JSFiddleと、こちらのサポートテーブルを参照してください。

また、いくつかの CSS ポストプロセッサーをこちらとこちらで確認してください。

score 11 · Accepted Answer

必要に応じてjQueryを使用してDOMを変更するだけです

if (mobile == true) {

    $('div.three').insertBefore($('div.two'));
}

score 4 · Accepted Answer

You can do this by jquery what you need to do is check the device and insert according to it

also its good to read responsive webdesign where you will learn stuff like that check this qustion Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

i found here good tips and also check this

6 に答える 6