0

現在、動的レイアウトの Web サイトに取り組んでいます。ウィンドウのサイズが変更されるたびに、どのレイアウトが最も適しているかを (jQuery を通じて) チェックし (そのためにいくつかのピクセル範囲を設定しました)、ページ上の要素に .high .med または .low クラスのいずれかを適用します。

これまでのところ、ほとんどすべてがうまくいきました。わからないことがいくつか残っています。

レイアウトはフロートに大きく依存しているため、「equalheights」jQuery プラグインを使用して列のサイズを同じ高さにしました。

(function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
        tallest = (minHeight) ? minHeight : 0;
        this.each(function() {

            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });

        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
            $(this).height(tallest).css;
        });
    }
})(jQuery);

問題は、レイアウトが切り替わると、列のサイズが変更され続けることです。これは通常は問題にはなりませんが、レイアウトはかなり異なります。

最初に、サイズ変更が発生する前に if "has class" ステートメントを追加しようとしましたが、追加時にスクリプトがクラスを「認識」しなかったため、これは機能しませんでした。これは、関数の実行順序に関係している可能性があります。

私はただの初心者 (javascript/jQuery の経験が 4 週間) ですが、もっと学びたいと思っています。

4

1 に答える 1

2

レスポンシブ/アダプティブ Web ページのデザインには、スクリプトではなくCSS3 メディア クエリを使用することをお勧めします。

これを見てください

これらはあまり処理しないため、軽量で最新のブラウザーとデバイスのほとんどが CSS3 をサポートしているため、便利で信頼性の高いオプションです。

于 2013-02-21T14:40:09.943 に答える