css - 响应式设计和百分比

Question

我是响应式设计的新手。我目前正在使用 Zurb 的 Foundation 4 来制作客户网站的原型(prototype)。

我在理解上有问题，或者我应该说计算百分比。例如，我的代码中有以下 HTML 片段:

<ul id="offers">
    <li class="small-6 large-3 columns">Offer 1</li>
    <li class="small-6 large-3 columns">Offer 2</li>
    <li class="small-6 large-3 columns">Offer 3</li>
    <li class="small-6 large-3 columns">Offer 4</li>
    <li class="small-6 large-3 columns">Offer 5</li>
    <li class="small-6 large-3 columns">Offer 6</li>
    <li class="small-6 large-3 columns">Offer 7</li>
    <li class="small-6 large-3 columns">Offer 8</li>
    <li class="small-6 large-3 columns">Offer 9</li>
    <li class="small-6 large-3 columns">Offer 10</li>
    <li class="small-6 large-3 columns">Offer 11</li>
    <li class="small-6 large-3 columns">Offer 12</li>
</ul>

我想在 block 之间添加一些间距，边距，但我不想使用像素值，因为这会占用太多屏幕空间。例如，如果我想要 20 像素的边距，我如何将其转换为百分比并确保它在所有浏览器中保持一致？

这让我有点困惑。

Answer 1

如何找到 20px 边距的百分比宽度？将它除以它的父级的宽度。假设宽度为 960 像素，边距为 20 像素，则为 960/20 = 0,02083333，因此约为 2%。

至于浏览器的一致性，这里可能会变得困惑。 101的50%是多少？显然是 50,5，但是由于没有半个像素这样的东西，浏览器会尝试猜测它应该将 tve 值舍入到什么。

IE - 永恒的智慧 - 将所有内容四舍五入，这意味着您最终可能会得到比其父项更宽的框，这通常会破坏布局。 Webkit 将所有内容向下舍入以防止布局中断，而 Gecko 将两者结合起来以避免仅来自向下舍入的空白像素。

通常，使用加起来刚好低于 100% 的百分比值。 99.9% 几乎总是足够的，但您需要为您的设计找到最大值。

我经常发现，将一行的最后一个子项向右浮动并移除它的(右)边距可以实现最结构化的布局，但这更像是一个一般性提示，而不是与问题相关的。