0

この関数を使用して、ブラウザーのサイズが変更されたとき、またはメニューが異なる解像度でレンダリングされているときに、いくつかのcssをメニューに適用します。私の問題はこれです、なぜブラウザは私の関数を正しく解釈しないのですか？なぜなら、ブラウザをハーフモードからフルモードでサイズ変更すると、ブラウザは'800-1024'解像度のみを解釈しますがctrl+f5、ブラウザで（すべてクリア）すると、解像度が正しく解釈されるので、機能の何が問題になっていますか？

function renderMenuCorection(){
                if ($('#containerHeader').exists()) {
                    var resizeObject = {

                        '0-640': '9px,2px,-3px,12px',
                        '640-800': '10px,2px,-5px,12px',
                        '800-1024': '10px,8px,-8px,15px',
                        '1024-1300': '12px,12px,-13px,11px',
                        '1300-2000': ',20px,-21px'
                    }

                    var win = $(window);
                    var win_width = win.width();

                    if (win_width > 0 && win_width <= 640) {
                        var value = getValueByKey(resizeObject, '0-640');
                        modifayMenu(value);
                    }
                    else 
                        if (win_width > 640 && win_width <= 800) {
                            var value = getValueByKey(resizeObject, '640-800');
                            modifayMenu(value);
                        }
                        else 
                            if (win_width > 800 && win_width <= 1024) {
                                var value = getValueByKey(resizeObject, '800-1024');
                                modifayMenu(value);
                                alert("I'm on: 800-1024 ," + win_width);
                            }
                            else 
                                if (win_width > 1024 && win_width <= 1300) {
                                    var value = getValueByKey(resizeObject, '1024-1300');
                                    modifayMenu(value);
                                    alert("I'm on: 1024-1300 ," + win_width);
                                }

                                else 
                                    if (win_width > 1300 ) {
                                       var value = getValueByKey(resizeObject, '1300-2000');
                                        modifayMenu(value);
                                    }
                }
            }
          function modifayMenu(value){
            var vals = value.split(',')
                $('#containerHeader').find('.roundMenuLi').each(function(index, item){
                    $(item).find('a').css('font-size', vals[0]);
                    $(item).css('padding-right', vals[1]);
                    $(item).css('padding-left', vals[1]);
                    $(item).find('#secondUl').css('margin-left', vals[2]);
                    $(item).css('padding-bottom', vals[3]);
              });

            }
          function getValueByKey(obj, myKey){

                $.each(obj, function(key, value){

                    if (key == myKey) {
                        returnValue = value;
                    }
                });
                return returnValue;
            }

ありがとうございました ！

4

4 に答える 4

12

CSS3とそのメディアクエリを使用します。例：

@media (max-width: 500px) {
    /* some CSS for small resolution */
}

@media (min-width: 1000px) {
    /* some CSS for large resolution */
}
于 2013-03-27T08:30:12.947 に答える
2

レスポンシブデザインを作成したい場合は、このリンクが役立ちます。

考慮しなければならないレスポンシブデザインの構築

  • フレキシブルグリッド
  • 柔軟な画像
  • メディアクワイア

/ *以下のコードは、レスポンシブデザインの重要な役割を果たしますが、それがなければ、目的を達成することはできません* /

<meta name="viewport" content="width=device-width" />/*これを頭の終了タグの前に置きます*/

@media (max-width: 320px) {

}

@media (min-width: 720px) {

}
于 2013-03-27T09:03:09.423 に答える
1

コードから見分けるのは難しいですが、ほとんどの場合、ページの読み込み時に関数を1回だけ呼び出しています。これを希望どおりに実行するには、イベントリスナーをアタッチし、ウィンドウのサイズが変更されるたびにコードを呼び出す必要があります。

上でコメントしたように、これを行うために独自のスクリプトを作成する必要がないように、ネイティブブラウザ機能を利用するためにレスポンシブWebデザインを調査することを検討してください。始めるのに良い場所は、同じ名前のAListApartの記事です。

于 2013-03-27T08:29:04.673 に答える
1

メディアクエリは、コードを使用して作成しているDOMへのすべてのアクセスよりもはるかに高速であることに加えて、Pavelが述べているように最良のソリューションです。IE8との互換性の問題は、Respond.jsと呼ばれるJavaScriptプラグインを使用して解決できます。試したことはありませんが、問題の解決策のようです。

于 2013-03-27T08:38:06.397 に答える