2

我是响应式设计的新手。我目前正在使用 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 的边距，我如何将其转换为百分比并确保它在所有浏览器中保持一致？

这让我有点困惑。

4

4 回答 4

1

如何找到 20px 边距的百分比宽度？将其除以其父项的宽度。假设 960px 宽度和 20px 边距，它是 960/20 = 0,02083333，所以 ~2%。

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

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

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

我经常发现将一行的最后一个子元素浮动到右侧并删除它的（右）边距会产生最结构化的布局，但这更多的是一般提示而不是与问题相关。

于 2013-05-18T09:04:16.383 回答
0

您不能通过百分比指定像素，除非它获取百分比的属性是以像素为单位定义的。

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

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

例如

#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
}
于 2013-05-18T08:47:33.350 回答
0

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

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

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

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

具有相对填充的另一个缺点是，如果您希望能够将列相互嵌套，那么您将更改上下文，因此您必须重新计算百分比。

于 2013-05-18T09:21:43.360 回答
0

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

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

从这里阅读更多信息

或者另一种方式是

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

px 与 em 的争论是一场漫长的争论，但 em 单位已经证明它们在响应式网页设计中很有用。大多数 Web 开发人员应该熟悉使用 em 单位，但值得回顾。em 单位是基于父元素的相对度量单位。

最常见的例子是 font-size，如果你想根据你的 body font-size (10px) 以 em 为单位设置标题 font-size (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 */ }
}

你可以从这里阅读更多

于 2013-05-18T08:51:36.037 回答