您可以将 Zurb Foundation 响应式断点从 640px 更改为 768px 吗？答案

【问题标题】：Can you change Zurb Foundation's Responsive breakpoint from 640px to 768px?您可以将 Zurb Foundation 响应式断点从 640px 更改为 768px 吗？
【发布时间】：2016-02-10 19:19:04
【问题描述】：

你能把 Zurb Foundation 的第一个断点从 640px 改成 768px 吗？（这样做有副作用吗？这是一种普遍接受的做法吗？）。

我认为 Bootstrap 的第一个断点是 768px，它确实为“桌面”浏览器或平板电脑留出了更多空间。 640px 实际上可能太狭窄而无法容纳所有东西，并且一直到 1024px，因此很难设计介于两者之间的任何东西。

在 640 像素时，我们将标题元素向下推，因此项目需要使用狭窄的边距空间来设置样式，而在 900 像素左右，边距空间是 % 值，因此它们会被扩展但仍然有些狭窄。

【问题讨论】：

这是个好问题。但是，您应该指定 Foundation 是什么版本，因为 Foundation v6 发生了很大变化。
如果你使用 F5 的话可以很容易地完成。
@Yass 推荐吗？ -- 有什么副作用或注意事项？
基金会没有明确禁止它，我不明白他们为什么会这样做。在他们的文档中，他们甚至提到了如何自定义断点：Foundation Media Queries。至于副作用，我在测试中没有注意到任何问题，尽管任何问题都应该很容易解决。

标签： zurb-foundation zurb-foundation-5

【解决方案1】：

如果您使用的是 SASS 版本的 Foundation，更改断点很容易。看一下 _settings.scss 文件，下面是相关的几行：

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);
$breakpoint-classes: (small medium large);

因此，对于您要实现的目标，您可以简单地将medium 的值更改为768，如果需要，还可以增加large。请注意，默认情况下，断点类数组不包含 xlarge 和 xxlarge - 如果您想要这些额外的类，只需将它们添加到数组中即可。如果需要，您也可以定义自己的。

【讨论】：