Question

我不明白网格mixin。实际上我使用这个代码，但只能在移动设备上工作，在桌面上，图像容器没有达到完整尺寸。

.vue-diapo-hp-img{
     //@include set-container-width();
       img{@include adaptable-img;}
       @include at-breakpoint ($mobile){
          @include set-container-width();
       }
       @include at-breakpoint ($desktop){
         @include set-container-width();
         //@include span-columns($desktop);
       }
       @include at-breakpoint ($tablet){
           @include set-container-width();
       }
}

html代码是（drupal views source）：

<div class="vue-diapo-hp-img">     <img class="imagefield imagefield-field_diapo_home_pano" width="990" height="204" src="http://sandboxd6-1.vmsbx/sites/sandboxd6-1.vmsbx/files/diapo_home/site-date-yyyy/site-date-ww/gabarit-diapo-home-er.jpg?1383819992">  </div>
<div id="transparency"></div>
<div id="contenu-diapo">
<h2></h2></div>

我能做些什么才能让断点工作？有什么区别

例如

@include set-container-width();和@include span-columns($desktop);？

您可以看到它的实际效果：http://d6sbx1.pfdev.tk/

感谢

EDIT1：解释后的修改代码

.vue-diapo-hp-img{
       clear: both;
       img{@include adaptable-img;}
       @include at-breakpoint ($mobile){
          @include set-container-width();
       }
       @include at-breakpoint ($desktop){
        @include set-container-width();
         //@include span-columns($desktop);
       }
       @include at-breakpoint ($tablet){
          @include set-container-width();
       }
}

这不会在手机上执行响应式图像，但会在桌面上显示全宽。

Answer 1

set-container-width根据总列数和网格填充设置宽度（或最大宽度）值。 span-columns设置该容器内项目的宽度 - 通常是相对宽度，除非您已将$container-style设置为static（在这种情况下，您没有）。 span-columns还应用浮点数和边距来对齐网格上的项目。使用静态网格并且没有网格填充，它们可能返回相同的宽度，但它们是为计算不同的对象而构建的，因此它们在下面使用不同的逻辑。

但它看起来像你已经有一个容器，你只想跨越该容器的整个宽度 - 在这种情况下你不需要任何一个容器。默认情况下，所有块元素（包括图像包装器）都会跨越整个宽度。如果您需要清除上面的浮动，您只需clear: both即可。正如你想要的那样，在每个断点处，都没有理由使用媒体查询：

.vue-diapo-hp-img{
  clear: both;
}

这应该就是你所需要的。最多，您可以添加width: 100% if（由于某种原因）它不会跨越整个宽度。

Susy和响应式图像

1 个答案: