作業中のサイトのレスポンシブ レイアウトに問題があります。
シナリオ:このサイトには、デスクトップ、タブレット、モバイル用に 3 つの異なるレイアウトがあります。Media Query で簡単に処理できるほとんど同じコンポーネント (いくつかの CSS 調整あり) があります。私のクライアントの要件は、サイトがレスポンシブでなければならず、ブラウザーのサイズ変更に合わせて調整する必要があるということです。
問題: 問題は、一部の div が異なるレイアウトで場所を移動することです。Div1 に subdiv1、subdiv2、subdiv3 があるとします。場合によっては、Div2 にいくつかのサブディビジョンがあり、Div1 のサブディビジョン 2 が Div2 のサブディビジョンの間に表示される必要があると言う他の div もあります。レイアウトのコンポーネントの位置が親レベルで異なるため、その処理方法について多くの問題が発生しています。
検討中のソリューション:
- ユーザー イベントに基づいて異なるテーマを作成する: テーマ自体がレスポンシブでないか、レスポンシブであってもクライアントが承認したレイアウトを採用しないため、このソリューションは実行できません。
- jquery を使用して、ロードおよびサイズ変更時にコンポーネントを別の親にシフトします。これにより、サイトの速度が低下し、他の問題が発生する可能性があります。
- CSS を使用して同じコンポーネントの異なるインスタンスを非表示にする: この解決策はかなり悪いように思えます。
私たちが見落としている他の良い解決策、これを行うためのより良いアプローチはありますか? これらのアプローチの中でさえ、どれが最良の解決策になるのだろうか?
パフォーマンス、SEO、読み込み時間など、多くの要素を考慮しています。
私は本当に混乱しており、何か提案をいただければ幸いです。