用于大屏幕基金会4响应网格布局

Question

我用compass与zurb foundation 4框架创建新sass项目。我screen.scss文件看起来如下：

// Reset and normalization settings 
@import "normalize"; 

// Global Foundation Settings 
@import "settings"; 

// Comment out this import if you are customizing you imports below 
@import "foundation"; 

默认设置包含以下行：

$row-width: 62.5em; 

这意味着，我们的网格行必须是1000像素（62.5em）为至少768px屏幕。

什么是增加一个媒体条件的正确方法，这将增加$row-width变量高达75em（1200px）的屏幕至少1280px？

Answer 1

在app.scss为.row创建断点，这样的：

.row{ 
    @media #{$medium} { 
     max-width: 75em; 
    } 
} 

基金会有被用于_visibility.scss媒体查询屏幕尺寸，例如$中的变量转化为“仅屏幕和（最小宽度：80em）“。 我还没有尝试过，但应该工作。 另外，看看这个答案，我只是修改了一点： https://stackoverflow.com/a/14247136/961064

你可以找到不同的屏幕尺寸等变量_visibility.scss：https://github.com/zurb/foundation/blob/master/scss/foundation/components/_visibility.scss