javascript - 列表的响应包装器

Question

我正在尝试制作响应式包装器。但是，我在确定它的正确高度时遇到问题。它基本上是一个列表，当列表变薄时，它的 child 会变胖。

这是 jsfiddle .请注意，当您调整输出窗口大小时，问题不会重现，因为它只是让列表从 View 中消失。在我的实际应用程序中，列表完全位于屏幕内。

这是我的尝试，使用 jQuery:

if ($(window).width() < 500) {
    $(".wrap").css("height", 100 * $(".list li").length);
    $(".wrap-list").css("height", 87 * $(".list li").length);
} else {
    $(".wrap").css("height", 70 * $(".list li").length); // every item has 70px height, I guess!!!
}

然而，这些硬编码值是错误 trim 的，因为我只是在我的机器上用我的眼睛弄清楚了它们。有什么想法吗？

Answer 1

如果我没理解错的话，您希望列表项随着屏幕宽度变小而变高。最佳做法是使用 CSS media queries , 不需要 JS:

label {
    padding: 10px;
}
@media only screen and (max-width:500px) {
    label{
        padding: 25px 10px;
    }
}

http://jsfiddle.net/daCrosby/cmfL2643/2/