【问题标题】：Foundation 5 no longer using xlarge and xxlarge grid sizesFoundation 5 不再使用 xlarge 和 xxlarge 网格大小
【发布时间】：2014-03-04 09:58:42
【问题描述】：

问题

在 Foundation 5.0.2 及更高版本中，它不使用 xlarge 和 xxlarge 网格大小。他们在以前的版本 5.0.0 和 5.0.1 中工作。

所以当从foundation进入css文件时，它只会显示小、中、大的网格尺寸。

显然 Foundation 5 的任何版本都没有 xlarge 和 xxlarge 块网格。

问题

有没有办法让这些再次工作？

测试

我去他们的网站下载了最新的5.1.1，在foundation.css中也有同样的问题。

我正在使用 Sass 自己构建它，并尝试在其中手动添加覆盖变量：

// Here we define the lower and upper bounds for each media size
$small-range: 0em, 40em // 0, 640px
$medium-range: 40.063em, 64em // 641px, 1024px
$large-range: 64.063em, 90em // 1025px, 1440px
$xlarge-range: 90.063em, 120em // 1441px, 1920px
$xxlarge-range: 120.063em // 1921px

$screen: "only screen"

$landscape: "#{$screen} and (orientation: landscape)"
$portrait: "#{$screen} and (orientation: portrait)"

$small-up: $screen
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"

【问题讨论】：

我刚刚运行了一个编译器（Foundation 5.1），它似乎对我有用。我能够成功地做到@media #{$xxlarge-up}。尝试仔细检查以确保您按顺序加载功能、设置和组件
@jonsuh 媒体查询不是问题，它是已编译的 CSS 文件中不存在的网格大小。在我编辑之前你可能已经回复了抱歉。
明白了——抱歉，我误解了你的问题。我发布了解决方案。他们默认禁用它。

标签： css sass media-queries zurb-foundation

【解决方案1】：

在您的 settings 文件中取消注释并将以下设置为 true（对我来说是第 32 行）：

$include-xl-html-grid-classes: true;

然后重新编译，xlarge 和 xxlarge 类应该存在。（确保摆脱你的覆盖，以防万一发生冲突）

【讨论】：

太棒了，就是这样。非常感谢！
这不会启用 xlarge-block-grid 和 xxlarge-block-grid，对吗？
@coorasse 正确。对于 xlarge 和 xxlarge 块网格，您可以在设置文件中取消注释并将以下内容设置为 true：$include-xl-html-block-grid-classes: true;
在 Foundation 中哪里可以找到这个“settings.scss”？

【解决方案2】：

这已在 Foundation 6 中进行了更改。在 _settings.scss 中，您现在可以找到 $breakpoint-classes 列表并添加您想要的额外类。例如

$breakpoint-classes: (small medium large xlarge);

【讨论】：

【解决方案3】：

你必须同时使用这两个来启用 xlarge 和 xxlarge 类

 $breakpoints: {
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
}
$include-xl-html-grid-classes: true;
$breakpoint-classes: (small medium large xlarge xxlarge);

【讨论】：