Foundation FrameWork中的BreakPoints

时间:2015-10-13 18:15:05

标签: html css responsive-design zurb-foundation

//小屏幕

@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&片剂。在改变基础断点时,是否有必要提供设计?适当推理的答案会有所帮助。

1 个答案:

答案 0 :(得分:0)

当然,有意义的是,您可以根据项目需求调整框架;大多数时候你可以使用现有的断点(Zurb根据他们的大多数时间场景定义了断点),但如果你的项目有特定的需求你可以适应,你可以做到。

我建议您不要使用基础基础包,而是使用"sass customized" version,这样您就可以完全控制框架变量。

在Foundation的设置文件的 d。部分,您可以编辑媒体查询范围(也就是断点范围),下次编译框架时,您将拥有断点就像你需要它们一样。