Question

我厌倦了猜测百分比，我需要使用$scope.shows = Show.query().filter(function(val) { if (val.rating !== null && val.poster !== null) return val; });以及我设计流程中的其他元素。我想知道在确定(x) amount of divs缩小if <div class=element1>时会采用什么样的数学计算，10%需要缩放<div class=element2>以保持(x)%间隙。不知道怎么说这个问题。我知道有引导程序，但我很好奇他们使用什么样的数学运算来保持它的响应能力。

Answer 1

要回答这个问题，我将澄清一些假设。如果它们不正确，请务必纠正它们。

您正在使用在列之间有固定装订线的设计。
你没有使用bootstrap。

如果您想要更好的控制，最好的办法是使用固定像素或基于em的装订线。这就是Bootstrap的工作方式。

.col {
    padding-right: 20px;
}
.col:last-of-type {
    padding-right: 0;
}

如果您关注图像或元素的宽高比，可以尝试以下方法：

.element-with-aspect-ratio {
    height: 0;
    width: 100%;
    box-sizing: border-box; // if not set globally
    padding-bottom: 33.33%; // For a 3:1 aspect ratio
}

我首选的方法是.column＆gt; .element-与纵横比

网格的数学运算不应该太复杂。查看Chris Coyier的这本指南。 https://css-tricks.com/dont-overthink-it-grids/

是否有任何数学算法有助于良好的响应式HTML设计？

1 个答案: