css - 基础 5 中行的最大宽度 62.5rem 背后的逻辑

Question

我发现默认情况下，foundation 会这样做来设置行的样式:

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem;
}

但是作为响应式框架，为什么会限制在62.5rem呢？效果非常丑陋，它始终是一个固定宽度的框，无法随屏幕宽度变化。其背后的逻辑是什么？如果我用 100% 覆盖它会怎样？一般而言，这会导致其网格系统出现问题吗？

谢谢

Answer 1

他们设置这个限制是因为不是每天都有“全宽设计”；他们引入了(在 Foundation 6 中)修饰符类 .expanded，它将行添加到它们变成全宽；如果你想在 Foundation 5 中有这种行为，你有两个选择:

<强>1。创建您的“.expanded”类

Foundation 限制行的 max-width，所以如果您将 .expanded 类添加到您想要流畅的行并添加一些代码，例如:

.row.expanded { max-width: none }

你可以让它工作......也许需要额外的代码才能使嵌套行正常工作。

<强>2。修改类/更改设置

Foundation 是一个非常可定制的框架，如果您使用的是 SASS 版本，您可以轻松地将变量 $global-width 修改为 100%。如果您使用的是预构建版本，只需在代码中找到 .row 声明并将 max-width 修改为 100%。

就是这样，希望对您有所帮助。