我想要一个通常为屏幕宽度80%的流体网格,最大宽度为1440px,但低于768px则是屏幕宽度的100%而不是80%。
只有一个“容器”设置,我不确定最好的方法来解决这个问题,或者说它有多可能。
我目前的设置是:
$susy: (
columns: 12,
container: 80%,
column-width: 20rem,
gutters: $gutter/10rem,
math: fluid,
output: float,
gutter-position: inside-static
);
我尝试根据这样的断点有条件地覆盖这些设置:
@include breakpoint($mini) {
$susy: (
container: 100%
);
}
@include breakpoint($huge) {
$susy: (
container: 1440px
);
}
但这不起作用,因为这不是断点的工作方式。
有没有办法与Susy实现这种布局?就我所见,这是一个相当常见的模式(因此我的任务是实现它),并且我不想在每次调用容器时都要覆盖。