基础框架工作中的断点

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

以上是Foundation Framework的标准断点。对于移动设备来说，可以看到断点是640的最大宽度，如果移动设备提供给我的设计大于640& 同样是Destkop& 平板电脑的情况。改变基础断点与提供的设计是否有意义？一个有适当理由的答案将是有帮助的。

Answer 1

当然，这是有道理的，你可以根据你的项目需求来调整框架；大多数情况下，你可以使用现有的断点（Zurb根据他们最常用的场景定义的断点），但如果你的项目有特殊需求，你也可以调整。

我建议你不要使用基本的基础包（预编译的），而是使用任何一个 "sass定制 "版 (你可以通过很多包管理器来实现)，所以你可以通过自定义变量来完全控制这个框架。

在Foundation的设置文件中，在 d.d.，你可以编辑媒体查询范围（也就是断点范围），下次编译框架时，你就会有你需要的断点。