我正在使用 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. 断点法 New 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 版本的。