5

jQuery を使用してレスポンシブ サイトを作成しようとしています (ターゲット オーディエンスが IE7/8 であり、css3-mediaqueries.js が jQuery UI に干渉しているように見えるため、この方法で作成する必要があります)。 mも使用しています）。次のスクリプトを使用して幅と高さを検出し、それに応じてスタイルを適用しています。幅には適していますが、高さには適していません。 SMstyle.css をロードしてから、style.cssで上書きします。私は JavaScript を学ぼうとしていますが、現時点ではそれほど強力ではありません。もっと簡単な方法があることはわかっています! どんな助けでも大歓迎です...

function adjustStyle(width) {
        width = parseInt(width);
        if ((width >= 701) && (width < 1200
        )) {
            $("#size-stylesheet").attr("href", "css/SMstyle.css");
        } else {
            $("#size-stylesheet").attr("href", "css/style.css");
        }
    }

    $(function() {
        adjustStyle($(this).width());
        $(window).resize(function() {
            adjustStyle($(this).width());
        });
    });

    function adjustStyle(height) {
        height = parseInt(height);
        if (height < 800
        ) {
            $("#size-stylesheet").attr("href", "css/SMstyle.css");
        } else {
            $("#size-stylesheet").attr("href", "css/style.css");
        }
    }

    $(function() {
        adjustStyle($(this).height());
        $(window).resize(function() {
            adjustStyle($(this).height());
        });

    });
4

2 に答える 2

1

レスポンシブ レイアウトを扱う場合、高さはあまり気にしません。全体的な概念は、コンテンツが幅に収まらない場合、コンテンツが折りたたまれる (したがって、高さが増加する) ということです。

編集：

$(this) の代わりに $(document) を使用する必要があると思います。これは、手動でトリガーした場合とサイズ変更イベントによってトリガーされた場合で、$(this) のスコープが異なるためです。

function adjustStyle() {
    var width = $(document).width();
    var height = $(document).height();
    if (((width >= 701) && (width < 1200)) || (height < 800)) {
        $("#size-stylesheet").attr("href", "css/SMstyle.css");
    } else {
        $("#size-stylesheet").attr("href", "css/style.css");
    }
}

adjustStyle();
$(window).resize(function() {
    adjustStyle();
});

さまざまなスコープを表示するには、これを試してください。

$(function() {
    console.log('Scope', $(this)); // Scope is DOM-element
    $(window).resize(function() {
        console.log('Scope', $(this)); // Scope is Window object.
    });
});
于 2012-12-20T18:08:36.647 に答える