我是使用 compas / susy 的新手,我正在使用移动优先方法构建我的网格。经过大量阅读,我不明白如何在 susy 中使用指南针断点($mobile、$tablet、$desktop)。实际上我需要设置我的 $container 宽度:
//*Réglage de la grille de Susy - approche mobile-first
$total-columns: 8; // nombre de colonnes de la grille de base
$column-width: 4em; // largeur de chaque colonnes
$gutter-width: 1em; // taille de la gouttière entre colonnes
$grid-padding: $gutter-width; // grid-padding equal to gutters
//Réglage du nombre de colonnes pour at-breakpoint() mixin
// qui simplifie les media-queries
$mobile : 4;
$tablet : 10;
$desktop : 14;
然后对于我的容器:
#general{
@include container;
@include susy-grid-background;
@include at-breakpoint($desktop) {
@include ???
}
}
在 for 元素之后,我认为这可能是:
#header{
@include @include span-columns(3);
@include at-breakpoint($desktop) {
@include span-columns(13, $desktop);
@include prefix(3, $desktop);
}
感谢帮助
EDIT1:使用此代码
#general{
//Approche mobile-first,réglage pour mobile
@include container;
@include susy-grid-background;
#header{}
#header-inner{}
#content-global{}
#left-content{}
#content-inner{}
#right-content{}
#footer{}
@include at-breakpoint($desktop) {/* //Dimensions pour les pc*/
@include set-container-width;
#header{@include span-columns($desktop,$desktop);}
#header-inner{}
#content-global{@include span-columns($desktop,$desktop);}
#left-content{@include span-columns(2 alpha,$desktop);}
#content-inner{@include span-columns(10,$desktop);}
#right-content{@include span-columns(2 omega,$desktop);}
#footer{@include span-columns($desktop,$desktop);}
}
@include at-breakpoint($tablet) {/* //Dimensions pour les tablettes*/
@include set-container-width;
#header{}
#header-inner{}
#content-global{}
#left-content{}
#content-inner{}
#right-content{}
#footer{}
}
}
萤火虫给我:
@media (min-width: 36.75em)
#general {
max-width: 49em; => applied
}
@media (min-width: 51.75em)
#general {
max-width: 69em;=> not applied
}
为什么我的断点没有应用?是否存在 mixin 或类似的东西来使图像响应(susy 或 compass)?
EDIT2:仍在测试并且看起来效果更好,但是容器没有像您的建议那样居中。但是为什么?我面对基本的容器设置,我的列设置也不会覆盖移动优先设置。
#general{
//Approche mobile-first,réglage pour mobile
@include container;
@include susy-grid-background;
@include at-breakpoint($desktop) {/* //Dimensions pour les pc*/
@include span-columns($desktop);
#header{@include span-columns($desktop);}
#left-content{@include span-columns(2 alpha,$desktop);}...}
EDIT3:另一个看起来更好的测试,我认为我的断点已应用但最大宽度仍然是 49em 而不是 69em ..
#general{
//Approche mobile-first,réglage pour mobile
@include container;
@include susy-grid-background;
@include at-breakpoint($desktop) {/* //Dimensions pour les pc*/
@include set-container-width($desktop);
#header{@include span-columns($desktop);}
#left-content{@include span-columns(2 alpha,$desktop);}...}
在这一点上,我认为这@include set-container-width($desktop);
对于容器宽度的变化以及@include span-columns($desktop);
嵌套在容器中的元素更好。
EDIT4(08/11/13)
#header {
.headHaut {@include span-columns($mobile);
.logoHead { @include set-container-width;}
.menuImg { @include set-container-width;}
}
.headBas {@include span-columns($mobile);
.site-slogan{@include span-columns($mobile);}
}
@include at-breakpoint($desktop) {/* //Dimensions pour les pc*/
.headHaut {@include set-container-width;
.logoHead { @include span-columns(3,$desktop);}
.menuImg { @include span-columns(7 omega,$desktop);}
}
.headBas {@include span-columns($desktop);
.site-slogan{@include span-columns(7,$desktop);}
}
}
渲染不一样,具有相同的网格设置,
#header {
.headHaut {@include span-columns($mobile);
.logoHead { @include set-container-width;}
.menuImg { @include set-container-width;}
}
.headBas {@include span-columns($mobile);
.site-slogan{@include span-columns($mobile);}
}
@include at-breakpoint($desktop) {/* //Dimensions pour les pc*/
#header{
.headHaut {@include set-container-width;
.logoHead { @include span-columns(3,$desktop);}
.menuImg { @include span-columns(7 omega,$desktop);}
}
.headBas {@include span-columns($desktop);
.site-slogan{@include span-columns(7,$desktop);}
}
} }