2

我曾经用框架compass创建新sass项目。zurb foundation 4我的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)。

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

4

1 回答 1

11

在 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

于 2013-03-06T10:21:21.780 回答