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 回答