Question

我正在尝试更改ul li a的填充以适应窗口内部，因为窗口变小了。

我想要完成的事情：www.seu.edu（主导航）

 $(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);

    }

});

我错过了什么？

Answer 1

我知道这是一个javascript问题，但您可以通过使用媒体查询或大小调整+填充来实现这一点。

使用媒体查询：

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

使用BOX-SIZING：

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

我认为这将是一个更持久且易于管理的解决方案，而不是为每个调整大小执行一个功能。应该使用EM或％，因为它与正在查看的设备相关，因此可以更好地进行缩放。 box-sizing：border-box确实将填充封装到元素所在的总宽度中。这样你就必须设置并忘记而不是担心容器溢出。

希望这是有帮助的，但如果它不是你想要的，不用担心：）

Answer 2

还有一个额外的支撑

$(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

});

Answer 3

它应该是$(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);
});

Updated Demo.

此外，css media query是响应性的首选方式。您已经得到了答案，请考虑使用此问题，由Shalom Aptekar回答。

动态更改使用javascript的导航填充

3 个答案: