列表的响应式包装器

Question

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

这里是jsfiddle。调整输出窗口大小时，注意不会重现问题，因为它只是让列表消失。在我的实际应用中，列表完全停留在屏幕内。

这是我的尝试，使用 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!!!
}

但是，这些硬编码的值是错误修剪的，因为我只是用我的眼睛在我的机器上发现了它们。请问有什么想法吗？

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/