为什么 Zurb Foundation 的行宽减少了一个间距宽度?
Why Zurb Foundation row width is reduced by one gutter width?
我在 Sass 中使用 Foundation 5。在 _settings.scss 中,您可以更改行和间距的宽度。默认情况下,行设置为 1000 像素,但如果您在 Photoshop 中测量 12 列页面的宽度,它仅为 970 像素宽。我还发现装订线的宽度设置为 30px。
我的问题是:为什么 1000px 行实际上是 970px 宽?我需要担心吗?或者,如果我想要 1000 像素宽的页面,我必须将行设置为 1030 像素?
要回答您的问题,您应该更多地了解网格以及 'gutter' 的构造方式。
大网格(具有 large-*
classes)将应用于宽度超过 64.062 em (~1025px) 的视口。在大网格上,“.row”得到:
max-width: 62.5rem; // (~1000px)
width: 100%;
所以在大屏幕上,您的 .row
确实有 1000 像素宽。
现在网格列使用百分比潜水每一行。所以 large-12
列(跨越 12 列)的宽度为 100%
,large-4
的宽度为 4/12 = 33,33%
,large-1
的宽度为 1/12 = 8,33%
.
上面的意思是一个large-12
的宽度是.row
class的100%
,所以在大格子上62.5rem; (~1000px).
您可以按如下方式使前面的内容可见:
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 像素,但左侧的填充为 15px,右侧的填充为 15px。因此,一行的宽度似乎为 1000 - 30 = 970 像素。
您也可以通过在之前使用的 HTML 上应用以下 SCSS 代码来使这些排水沟可见:
.row {
background-color: yellow;
div {
background-color: darkblue;
div {
background-color: red;
}
}
color: white;
}
现在您的网格如下所示:
或者通过检查 large-12
列的盒子模型:
My questions are: why 1000px row is in reality 970px wide? Do I have to
worry about it?
我认为你首先不应该担心它。见上文。
Or maybe if I want 1000px wide page I have to set row to 1030px?
好吧,如果你有充分的理由这样做,你可以使用:$row-width: rem-calc(1030);
然后 large-12
的盒模型确实如下所示:
请注意,您还必须将 $medium-breakpoint: em-calc(1024);
更改为等于或大于 1030 像素的值,以防止视口大于 1024 且小于 1030 像素时出现水平滚动条。
或者您可以考虑通过设置 $column-gutter: 0;
来移除装订线。另见:What's the point of gutters in CSS grid frameworks?
我在 Sass 中使用 Foundation 5。在 _settings.scss 中,您可以更改行和间距的宽度。默认情况下,行设置为 1000 像素,但如果您在 Photoshop 中测量 12 列页面的宽度,它仅为 970 像素宽。我还发现装订线的宽度设置为 30px。
我的问题是:为什么 1000px 行实际上是 970px 宽?我需要担心吗?或者,如果我想要 1000 像素宽的页面,我必须将行设置为 1030 像素?
要回答您的问题,您应该更多地了解网格以及 'gutter' 的构造方式。
大网格(具有 large-*
classes)将应用于宽度超过 64.062 em (~1025px) 的视口。在大网格上,“.row”得到:
max-width: 62.5rem; // (~1000px)
width: 100%;
所以在大屏幕上,您的 .row
确实有 1000 像素宽。
现在网格列使用百分比潜水每一行。所以 large-12
列(跨越 12 列)的宽度为 100%
,large-4
的宽度为 4/12 = 33,33%
,large-1
的宽度为 1/12 = 8,33%
.
上面的意思是一个large-12
的宽度是.row
class的100%
,所以在大格子上62.5rem; (~1000px).
您可以按如下方式使前面的内容可见:
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 像素,但左侧的填充为 15px,右侧的填充为 15px。因此,一行的宽度似乎为 1000 - 30 = 970 像素。
您也可以通过在之前使用的 HTML 上应用以下 SCSS 代码来使这些排水沟可见:
.row {
background-color: yellow;
div {
background-color: darkblue;
div {
background-color: red;
}
}
color: white;
}
现在您的网格如下所示:
或者通过检查 large-12
列的盒子模型:
My questions are: why 1000px row is in reality 970px wide? Do I have to worry about it?
我认为你首先不应该担心它。见上文。
Or maybe if I want 1000px wide page I have to set row to 1030px?
好吧,如果你有充分的理由这样做,你可以使用:$row-width: rem-calc(1030);
然后 large-12
的盒模型确实如下所示:
请注意,您还必须将 $medium-breakpoint: em-calc(1024);
更改为等于或大于 1030 像素的值,以防止视口大于 1024 且小于 1030 像素时出现水平滚动条。
或者您可以考虑通过设置 $column-gutter: 0;
来移除装订线。另见:What's the point of gutters in CSS grid frameworks?