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

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;

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

添加一个多媒体条件的正确方法是什么$row-width,对于至少1280px的屏幕,这将增加高达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