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 问题，但您可以通过使用媒体查询或 box-sizing + padding 更简单地完成此操作。

使用媒体查询：

@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

有一个额外的支架

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