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

Question

随着窗口变小，我正在尝试更改 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);

    }

});

我错过了什么？

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 所做的是将填充封装到元素的总宽度中。这样一来，您只需设置并忘记，而不用担心容器溢出。

希望这对您有所帮助，但如果这不是您想要的，请不要担心 :)