BreakPoints in 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 */

// XLarge屏幕

@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 */

以上是基础框架标准的断点。

对于Mobile，它的断点最大宽度为640，如果为移动设备提供的设计大于640，Destkop和tablet的情况也是一样的。将基金会断点wrt更改为提供的设计是否有意义？有适当推理的答案是有帮助的。

Answer 1

当然，这是有意义的，您可以根据您的项目需要调整框架；大多数时间您可以使用现有的断点( Zurb根据它们的大部分时间场景定义的)，但是如果您的项目有特定的需求，您可以进行调整。

我建议您不要使用基本的基础包(预编译)，而是使用任何"sass定制“版本 (可以通过大量的包管理器来实现)，这样您就可以通过自定义变量完全控制框架。

在基金会的设置文件d.节中，您可以编辑媒体查询范围(a.k.a )。(断点范围)，下一次编译框架时，您将得到所需的断点。