0

我将 Foundation 5 与 Sass 一起使用。在_settings.scss 中,您可以更改行和装订线的宽度。默认情况下,行设置为 1000 像素,但如果您在 Photoshop 中测量 12 列页面的宽度,则它只有 970 像素宽。我还发现装订线的宽度设置为 30px。

我的问题是:为什么 1000px 行实际上是 970px 宽?我需要担心吗?或者,如果我想要 1000 像素宽的页面,我必须将行设置为 1030 像素?

4

1 回答 1

0

要回答您的问题,您应该更多地了解网格以及“排水沟”是如何构建的。

大网格(带有large-*类)将应用于宽于 64.062 em(~1025px)的视口。在大网格上,“.row”得到:

max-width: 62.5rem; // (~1000px)
width: 100%;

所以在大屏幕上,你.row的 's 确实是 1000px 宽。现在网格列使用百分比潜入每一行。因此,一large-12列(跨越 12 列)的宽度为100%,一列large-44/12 = 33,33%,一列large-11/12 = 8,33%

上面的意思是alarge-12有一个类的宽度100%.row所以在大网格62.5rem上;(〜1000像素)。

您可以使前面的内容可见,如下所示:

HTML:

<div class="row">
  <div class="large-6 columns"><div>text</div></div>
  <div class="large-6 columns"><div>text</div></div>
</div>            
<div class="row">
  <div class="large-4 columns"><div>text</div></div>
  <div class="large-4 columns"><div>text</div></div>
  <div class="large-4 columns"><div>text</div></div>
</div>
<div class="row">
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
</div>

SCSS:

.row {
background-color: yellow;
div {
background-color: darkblue;
}
color: white;
}

在您的浏览器中,前面的内容如下图所示:

在此处输入图像描述

的盒子模型.row会告诉你它仍然有 1000px 的宽度:

在此处输入图像描述

由于列的蓝色背景颜色与行的黄色背景颜色完全重叠,因此您知道列的宽度之和也应该是 1000px。

现在关于排水沟。默认情况下,排水沟已设置为:$column-gutter: rem-calc(30px);(1.875rem)

为了构建排水沟,网格的每一列gutter-size / 2在每一侧都有一个填充。因此,一large-12列的宽度为 1000 像素,但左侧有 15 像素的内边距,右侧有 15 像素的内边距。出于这个原因,一行的宽度似乎为 1000 - 30 = 970 像素。

您也可以通过在之前使用的 HTML 上应用以下 SCSS 代码来使这些排水沟可见:

.row {
background-color: yellow;
div {
background-color: darkblue;
div {
background-color: red;
}
}
color: white;
}

现在您的网格如下所示:

在此处输入图像描述

或者通过检查large-12列的盒子模型:

在此处输入图像描述

我的问题是:为什么 1000px 行实际上是 970px 宽?我需要担心吗?

我认为你不应该首先担心它。往上看。

或者,如果我想要 1000 像素宽的页面,我必须将行设置为 1030 像素?

好吧,如果你有充分的理由这样做,你可以使用:$row-width: rem-calc(1030);然后确实 a large-12will 的盒子模型如下所示:

在此处输入图像描述

请注意,您还必须更改$medium-breakpoint: em-calc(1024);为等于或大于 1030 像素的值,以防止视口 > 1024 且小于 1030 像素的水平滚动条。

或者您可以考虑通过设置来移除装订线$column-gutter: 0;。另请参阅:CSS 网格框架中的排水沟有什么意义?

于 2015-05-02T22:23:45.850 回答