css - 适用于大屏幕的 Foundation 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;

这意味着对于至少 768px 的屏幕，我们的网格行必须为 1000px (62.5em)。

添加一个媒体条件的正确方法是什么，对于至少 1280 像素的屏幕，这会将 $row-width 变量增加到 75em (1200px)？

Answer 1

在 app.scss 中为 .row 创建断点，如下所示:

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

Foundation 在 _visibility.scss 中有用于媒体查询的屏幕尺寸变量，例如 $medium 翻译为“仅屏幕和 (min-width:80em)”。 我自己还没有尝试过，但应该可以。 另外，看看这个答案，我只是稍微修改了一下: https://stackoverflow.com/a/14247136/961064

您可以在_visibility.scss中找到不同屏幕尺寸的其他变量:https://github.com/zurb/foundation/blob/master/scss/foundation/components/_visibility.scss