Susy:针对不同的屏幕尺寸使用不同的布局

Question

我正在使用Susy构建移动第一个网站,并希望针对不同的屏幕尺寸使用不同的布局.每个布局都有自己的列,列宽和装订线宽度.

我该怎么做呢？

---

我的尝试:

1.老苏西方法

在老Susy,你会这样做:

$base-font-size: 10px;
$show-grid-backgrounds  : true;


$total-columns       : 4;
$column-width        : 6.250em;
$gutter-width        : 1em;
$gutter-padding      : $gutter-width;

body {
background:pink;    
}


@media only screen and (min-width: 480px) {
$total-columns       : 3;
/*$column-width        : 12.567em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:yellow;  
}


}

@media only screen and (min-width: 600px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:blue;    
}

}

@media only screen and (min-width: 768px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:green;   
}

}

@media only screen and (min-width: 960px) {
$total-columns       : 6;
/*$column-width        : 8.833em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:red; 
}

}

[背景颜色是这样,我可以告诉它工作]

在New Susy中,当我这样做时,无论屏幕大小如何,列数始终为6.它们的列大小也不正确.

2.断点方法 新的Susy有一个新的断点方法,允许您为不同的布局指定不同的列.这就是我使用它的方式:

$base-font-size: 10px;
$show-grid-backgrounds  : true;


$total-columns       : 4;
$column-width        : 6.250em;
$gutter-width        : 1em;
$gutter-padding      : $gutter-width;

body {
background:pink;    
}

.layout-primary {
  @include container;
  @include susy-grid-background;
}


@include at-breakpoint(480px 3) {
  .layout-primary {
  @include container;
 }

}

@include at-breakpoint(600px 6) {
  .layout-primary {
  @include container;
 }
}

@include at-breakpoint(768px 6) {
  .layout-primary {
  @include container;
 }
}

当我使用此代码时,无论布局如何,列现在始终保持在4.您也无法使用此方法指定不同的列宽/填充值.

苏西太棒了,我知道我误解了什么.但是我花了很长时间浏览文档并尝试不同的东西,却看不出我做错了什么.

我知道我之前已经问过这个问题,但这是针对旧的Susy版本.

Answer 1

您在每个断点处在后台看到4列的原因是,您只@include susy-grid-background;在4列上下文中声明了.我认为有人已经提交了一个错误来创建一个断点/后台快捷方式,因此即将推出.与此同时,你必须在你打电话的任何地方重新调用mixin container.

@include at-breakpoint(600px 6) {
  .layout-primary {
    @include container;
    @include susy-grid-background;
  }
}

但是你是对的,at-breakpoint只允许在这一点上改变列数.我想扩展它,所以如果你在github上提交一个bug,我很乐意看看它.在此期间,有一个with-grid-settingsmixin允许您更改所有基本设置(我也希望尽快获得高级设置).

@include at-breakpoint(600px 6) {
  @include with-grid-settings(6,6em,1em,1em) {
    .layout-primary {
      @include container;
      @include susy-grid-background;
    }
  }
}