2

ページの途中にナビゲーションを含む標準的な Web サイトがあります。サイズを 980px に下げると、メディア クエリが開始され、ナビゲーションの外観を変更する必要がありますが (簡単です)、ページの上部になるように DOM 内の位置も変更する必要があります。CSS ポジショニングは機能しないため、これには使用できません。

現時点では、次のようなページの読み込み/サイズ変更/向きの変更イベントに jQuery ロジックをバインドしようとしています。

var mobileBreakPoint = 980;
$(window).bind('load resize orientationchange', function () {
    if ($(window).width() <= mobileBreakPoint) {
        $('.primary').insertAfter('.new-placeholder');
    } else {
        $('.primary').insertAfter('.original-placeholder');
    }
});

ただし、最初に、javascript を使用してページ内の HTML のかなり大きなチャンクを移動することがパフォーマンスの観点から良い考えかどうかはわかりません (このサイトはモバイルでうまく動作することが期待されているため、メディア クエリが必要です!); 第二に、上記の私のコードは、DOM 構造を元の位置に戻すために jQuery '.on()' のようなものを使用する必要があります。かなりの処理負荷を追加します。

誰かがこれについて何か良いアイデアを持っているかどうか疑問に思いましたか? これが最善の方法ですか？パフォーマンスについて心配するのをやめるべきですか、それともナビゲーションを 2 回レンダリングし、CSS を使用してさまざまなバージョンを表示/非表示にする必要がありますか?

この種のことを行うための非常に最先端のCSS3のものがあるかもしれませんが、IE7をサポートする必要があるため、おそらくオプションではありません.

どうもありがとう。

4

1 に答える 1

0

あなたがそれを与えposition:fixed、トップオフセットに従って、それはうまくいくはずです。

レスポンシブ デザインにおけるかなりのレイアウトの再配置は未解決のトピックであり、私が推測する一般的な解決策はありません。不要なものを非表示にするか [ hidden-*Bootstrap クラスなど]、いくつかのものを複製するか [避けられるもの] です。

それにもかかわらず、enquire.jsを見てください。確かに役立つかもしれません。

于 2013-05-19T21:30:31.437 に答える