2

ウィンドウが小さくなったので、ウィンドウ内に収まるように ul li a のパディングを変更しようとしています。

私が達成しようとしていること: www.seu.edu (メインナビゲーション)

私が持っているもの: http://jsfiddle.net/RHwwq/5/

 $(document).resize(function() {
    var wide = parseFloat($('nav.main').css('width'));
    var newMargin = wide/5;
    newMargin = (newMargin/2)+'px';
    $('nav.main ul li a').css('padding-left',newMargin);
    $('nav.main ul li a').css('padding-right',newMargin);

    }

});

私は何が欠けていますか？

4

3 に答える 3

3

これが JavaScript の質問であることはわかっていますが、メディア クエリまたはボックス サイズとパディングのいずれかを使用することで、これをより簡単に実現できます。

メディア クエリの使用:

@media screen and (max-width:500px) {
    padding:0px 10px;
}
@media screen and (max-width:800px) {
    padding:0px 20px;
}

ボックスサイズの使用:

box-sizing:border-box;
padding:0 0.5em; // OR percentage, pt whatever.

これは、サイズ変更ごとに機能を実行するよりも、より長く持続し、管理しやすいソリューションになると思います。EM または % を使用する必要があります。これは、表示されているデバイスに関連しているため、より適切にスケーリングされます。box-sizing:border-box が行うことは、パディングを要素の幅全体にカプセル化することです。そうすれば、コンテナがオーバーフローすることを心配するのではなく、設定して忘れる必要があります。

これがお役に立てば幸いですが、あなたが探していたものではない場合でも心配はいりません:)

于 2013-09-17T17:51:32.980 に答える
0

あなたの例では、イベントがトリガーされて$(window).resizeいないはずです。これを試すことができます$(document).resize

$(window).resize(function() {
    var wide = $('nav.main').width();
    var newMargin = wide/5;
    newMargin = (newMargin/2)+'px';
    $('nav.main ul li a').css('padding-left',newMargin);
    $('nav.main ul li a').css('padding-right',newMargin);
});

デモを更新しました。

また、css media query応答性のために推奨される方法です。あなたはすでに答えを得ています。これを使用することを検討してShalom Aptekarください。

于 2013-09-17T17:54:32.290 に答える
0

余分なブレースがあります

$(document).resize(function() {
    var wide = parseFloat($('nav.main').css('width'));
    var newMargin = wide/5;
    newMargin = (newMargin/2)+'px';
    $('nav.main ul li a').css('padding-left',newMargin);
    $('nav.main ul li a').css('padding-right',newMargin);

    } // <------ remove this

});
于 2013-09-17T17:48:54.580 に答える