问题
在 Foundation 5.0.2 及更高版本中,它不使用 xlarge 和 xxlarge 网格大小。他们在之前的版本 5.0.0 和 5.0.1 中工作。
因此,当从 foundation 进入 css 文件时,它只会显示小、中和大网格尺寸。
显然 Foundation 5 的任何版本都没有 xlarge 和 xxlarge block 网格。
问题
有没有办法让它们重新工作?
测试
我去他们的网站下载了最新的 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)})"
最佳答案
在您的 settings
文件中取消注释并将以下设置为 true(对我来说是第 32 行):
$include-xl-html-grid-classes: true;
然后重新编译,xlarge 和 xxlarge 类应该存在。 (确保摆脱你的覆盖,以防发生冲突)
关于css - Foundation 5 不再使用 xlarge 和 xxlarge 网格大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21620140/