Question

我使用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;

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

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

Answer 1

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

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

Foundation具有用于_visibility.scss中的媒体查询的屏幕尺寸的变量，例如$ media转换为“only screen and（min-width：80em）”。我还没有尝试过，但是应该工作。另外，看看这个答案，我只是修改了一下： https://stackoverflow.com/a/14247136/961064

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

基础4响应网格布局的大屏幕

1 个答案: