如何使用指南针断点？

debugcn 发表于 Dev

网站管理员pf

我是使用compas / 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 ???
     }
 }

在元素之后，我认为这可能是：

#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或类似的东西来使图像响应（可疑或指南针）？

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);嵌套在容器中的元素更好。

编辑4（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);}
                   } 
  }  }

米里亚姆·苏珊（Miriam Suzanne）

是的。at-breakpoint实际上是Susy的一部分，您有使用它的正确想法。嵌套在断点mixin中的任何内容都会影响您设置的大小。将您想要更改的任何尺寸放入该尺寸。

您的#header示例可以很好地工作，但可以对其进行简化。at-breakpoint更改所有嵌套项目的默认上下文，这意味着您无需传递$desktop给子项（现在是默认值）。

对于容器，您有几种选择。第一种是简单地在每个断点处container和susy-grid-background内部重复您的调用。它重复了一些输出，因此有多种方法可以简化它，如果您愿意的话：

// a shortcut for setting multiple containers
// - simplest version, but doesn't include changes to the grid background
#general { @include container($total-columns, $desktop); }

// more control, with optimal output
// - use set-container-width, because width is the only thing you need to change
// - you can add the grid background at each breakpoint as well
#general {
  @include container;
  @include at-breakpoint($desktop) {
    @include set-container-width;
  }
}

我经常完全采用另一种方法-将容器设置为仅最大的断点，并使其在该断点以下完全流畅。但这在很大程度上取决于您的设计。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。