0

私はレスポンシブ サイトに取り組んでおり、画面が特定のサイズに達したら、要素の前にいくつかのブレークラインを追加して、要素を移動させたいと考えています。私はこれでそれを達成しました。

jQuery(window).resize(function () {
    var WINDOW = jQuery(window).width();

    console.log(WINDOW)

    if (WINDOW < 1025) {
        jQuery('<br /><br />').insertBefore('#FILTER_ADVANCED');
    }

});

ウィンドウが 1025 を超えたときにこれらのブレークラインを削除する方法はありますか? 私はinsertBefore（）の反対を探していると思います。

ブラウザのサイズを変更して、すべてが所定の位置にジャンプするのを見たいと思っていますが、無意味であることはわかっていますが、それができないという事実は私を悩ませています。

ありがとう。

jQuery をメディア クエリ内にカプセル化できますか?

4

2 に答える 2

2

Blunt solution. Something like this:

$(window).resize(function () {
    var WINDOW = $(window).width();

    console.log(WINDOW)

    if (WINDOW < 1025) {
        jQuery('<br /><br />').insertBefore('#FILTER_ADVANCED');
    } else {
        jQuery("#FILTER_ADVANCED").prev("br").remove();
        jQuery("#FILTER_ADVANCED").prev("br").remove();
    }

});
于 2013-07-29T15:51:24.383 に答える
0

「レスポンシブ」デザインとは、ユーザーが画面のサイズを変更することに反応するという意味ではなく、さまざまなサイズの画面 (つまり、モバイルとデスクトップ) で適切に表示されることを意味することに注意してください。

CSS を使用して、次のような css ルールを使用して同じことを行うことができます (私は css をあまり使用しないと思います)。

// big screen - no padding
@media (min-width:1024px) 
{ 
  #FILTER_ADVANCED padding-top: 0px
}

// small screen - some padding
@media (max-width:1024px) 
{ 
  #FILTER_ADVANCED padding-top: 10px
}
于 2013-07-29T15:53:11.750 に答える