Foundation FrameWork 中的断点

Question

// 小屏幕

@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// 中等屏幕

@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// 大屏幕

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// 超大屏幕

@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge 屏幕

@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

以上是基础框架标准断点。
对于移动设备，断点最大宽度为 640，如果提供给我的移动设备设计大于 640，桌面和平板电脑的情况也是如此。将 Foundation 断点更改为提供的设计有意义吗？有适当推理的答案会有所帮助。

Answer 1

当然有道理，您可以根据项目需要调整框架；大多数时候你可以使用现有的断点（Zurb 根据他们大多数时间的场景定义的断点），但是如果你的项目有特定的需求，你可以适应。

我向你推荐的是，不要使用基本的基础包（预编译），而是使用任何 "sass customizable" version（你可以通过很多包管理器来做到这一点），所以你'通过自定义变量，您可以完全控制框架。

在 Foundation 的设置文件中，d. 部分，您可以编辑媒体查询范围（a.k.a。断点范围），下次编译框架时，您将获得所需的断点。