Question

我是响应式设计的新手。我目前正在使用Zurb的Foundation 4对客户网站进行原型设计。

我有一个问题的理解，或者我应该说计算百分比。例如，我的代码中包含以下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>

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

这对我来说有点混乱。

Answer 1

如何找到20px边距的百分比宽度？除以它父母的宽度除以它。假设宽度为960px，保证金为20px，它的960/20 = 0,02083333，那么~2％。

至于浏览器的一致性，这里的事情可能会变得混乱。 101的50％是什么？ 50,5，很明显，但由于没有像半像素这样的东西，浏览器会尝试猜测它应该将值变为什么。

IE - 以其永恒的智慧 - 将一切都围绕起来，这意味着你最终可能会比他们的父母更宽广，通常会破坏布局。 Webkit将所有内容都向下舍入以防止布局中断，Gecko将两者结合起来以避免仅仅向下舍入的空白像素。

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

我经常发现将一行中的最后一个孩子向右移动并移除它（右）边距会产生最结构化的布局，但这更像是一个通用的提示，而不是相关的。问题

Answer 2

您不能通过百分比指定像素，除非它所采用的属性百分比来自像素。

百分比是第一个定位父级的维度的百分比。如果您定位的父级具有以像素为单位指定的尺寸，则可能。

但是，如果您想使用百分比来占用一定数量的用户视口，那么您必须接受不再可能的像素精度。

e.g。

#offers {
   width: 1000px;
   position: relative;
}

#offers li {
   width: 10%; // Width is now 100px
}

但是

#offers li {
   width: 10%; // Assuming there is no positioned parent then width is now 10% width of the users viewport and width depends on viewport size
}

Answer 3

根据我的理解，我通过百分比设置宽度，我根本不触及高度，所以假设我在900px容器内有一个500px宽度的div，如果我理解正确的百分比将是：< / p>

#sample-div
{
     width: 55.55555555555556%; /* 500/900 = 0.5555555555555556 */
}

从here

了解更多相关信息

或另一种方式是

不要使用px单位，请使用em单位

px vs em辩论很长，但是em单位已经证明自己在响应式网页设计中很有用。大多数Web开发人员都应该熟悉使用em单元，但值得一看。 em单位是基于父元素的相对测量单位。

最常见的例子是font-size，如果你想根据你的身体字体大小（10px）以em为单位设置标题字体大小（20px）：

20px &divide; 10px = 2em

target &divide; context = result

body { font: 100%/1.5 serif; /* 16px */  }

h1 {  font-size: 2em; /* 32px */ }

@media (min-width: 600px) {
   body { font: 112.5%; /* 18px */  }
   h1 {    /* Do nothing! I'll automatically be 36px */ }
}

您可以从here

了解更多信息

Answer 4

从我所看到的zurb基础框架在列div上使用填充来创建“列div”内部的东西之间的间隙/间距。如果您在列div后添加一些边距，则必须重新计算所有列的宽度，以便为边距留出空间。

如果您想要将列的填充更改为百分比，则应覆盖.column / .columns css规则：

.column,
.columns {
    padding: 0 1.5625%;
}

您可以使用result = target / context规则来计算百分比，这里我假设当总宽度（上下文）为960px时，您希望填充为15px（作为默认基础填充）。计算百分比：15/960 = 0.015625，即1.5 ...％。您可能希望尝试使用更大的填充百分比，因为当您拥有960px容器时，1.5％看起来很好，但它会快速看起来非常狭窄，当容器为480时，列之间的总空间将为一半（15px而不是30px））原始实现中的内容（因为上下文已减半）。

拥有相对填充的另一个缺点是，如果您希望能够在彼此内部嵌套列，那么您将更改上下文，因此您将不得不重新计算百分比。

响应式设计和百分比

4 个答案: