我正在使用Susy构建移动第一个网站,并希望针对不同的屏幕尺寸使用不同的布局。每个布局都有自己的列,列宽和装订线宽度。
我该怎么做?
<小时/> 我的尝试:
1。老苏西方法
在老苏西,你会这样做:
$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有一个新的break point method,允许您为不同的布局指定不同的列。这就是我使用它的方式:
$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太棒了,我知道我误解了什么。但是我花了很长时间浏览文档并尝试不同的东西,看不出我做错了什么。
我知道我已经问了这个问题before,但那是旧的Susy版本。
答案 0 :(得分:6)
您在每个断点处看到后台中有4列的原因是,您只在4列上下文中声明了@include susy-grid-background;
。我认为有人已经提交了一个错误来创建一个断点/后台快捷方式,所以即将推出。与此同时,您必须在调用container
的任何地方重新调用mixin。
@include at-breakpoint(600px 6) {
.layout-primary {
@include container;
@include susy-grid-background;
}
}
但是你是对的,at-breakpoint
只允许在此时更改列数。我想扩展它,所以如果你在github上提交一个bug,我很乐意看看它。在此期间,有一个with-grid-settings
mixin允许您更改所有基本设置(我也希望尽快获得高级设置)。
@include at-breakpoint(600px 6) {
@include with-grid-settings(6,6em,1em,1em) {
.layout-primary {
@include container;
@include susy-grid-background;
}
}
}