4

特定の解像度を超える等高関数を完了するスクリプトを作成しようとしています。

その解像度を下回ると、モバイル版のサイトで同じ高さの列がなくなるため、スクリプトをオフにしたいと思います。

これをサイズ変更時にも実行したいと思います。これまでの私のコードは次のとおりです。これはまったく機能しません。

ストレッチ機能は、チェック幅機能の外側でテストされています。

これが私のコードです:

オリジナルストレッチ機能

$(document).ready(function () {
    var $stretch = $(".eq");
    $stretch.animate({ height: $stretch.parent().height() }, 300 );
});

機能しないリサイズ機能

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $stretch = $("#narrow")
    var $stretch2 = $(".eq")

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $stretch.animate({ height: $stretch.parent().height() }, 800 );
            $stretch.animate({ height: $stretch2.parent().height() }, 300 );                
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

これどうやってするの？

4

2 に答える 2

3

jquery部分について

$(window).resize(function() {
    // do your stuff here

    checkWidth();
});

js の組み合わせでメディアクエリを使用する場合、$(window).width()スクロールバーによりメディアクエリの幅とが異なることに注意してください。

于 2012-10-12T16:08:02.600 に答える
3

そのような場合は、jQuery の代わりに CSS を使用することを強くお勧めします。レスポンシブ UI は、次のようなメディア クエリで処理できます。

@media screen and (max-width: 1200px) {
    body{ width:1000px; }
}

@media screen and (max-width: 440px) {
    body{ width:440px; }
}

これを簡単にする優れたツールがたくさんありますが、最も人気のあるツールの 1 つはTwitter Bootstrapです。

于 2012-10-12T16:05:36.193 に答える