Foundation - 支持 x(x)large？

Question

我已经开始玩 Foundation，我意识到有可能支持更大的屏幕，但我不知道如何启用。

我基本上想做的是能够解决更大的屏幕（最大 1920 像素）并以各种方式使用这些额外的断点，例如能够指定必须显示多少块网格元素的能力在 xxlarge, xlarge, large,...

我检查了设置文件，那里有几处似乎表明这是可能的。

我先取消评论：

//$row-width: rem-calc(1000);

并将其设置为：

$row-width: rem-calc(1920);

有了这个，我发现我的可寻址屏幕更大了，但断点仍然相同。

我也取消了注释：

$large-breakpoint:  em-calc(1440);
$xlarge-breakpoint: em-calc(1920);

...等.. （以及 d.Media 查询范围部分中的几乎所有内容）

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

但即使启用了所有这些功能，断点仍然无法处理像这样的简单事情：

<div class="row">
<div class="xlarge-12 columns">content</div>
</div>

这显示 div 大小与 large-12

完全相同

有什么想法吗？

谢谢洛朗

Answer 1

$row-width指内容的最大宽度。基础网格是 12 列，所以任何 div 和 {size}-12 都将是 100% 宽。这就是 large-12 和 xlarge-12 divs 宽度相同的原因。

要使内容在大屏幕上变小而在超大屏幕上变大，试试这个：

<div class="row">
    <div class="large-10 xlarge-12 columns">content</div>
</div>

Foundation - support for x(x)large?