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/

列表的响应包装器

1 个答案: