切换媒体查询时为什么要更改网格大小？

Question

我已经使用奇异性大约一年了，但我仍然没有 100% 充分发挥它的潜力，或者说真的是“正确”的方式。

我的主要问题是为什么要根据媒体查询更改网格大小。

我现在正在使用这样的 SGS：

grids: 12;
$gutters: 1/2;

.column { 
  // mobile first ... full-width  
  @include breakpoint($from-medium) { // 2 columns on medium devices
    @include grid-span(6, first);
    &:nth-child(even) {
      @include grid-span(6, last);
    }
  }
  @include breakpoint($from-large) { // 3 columns on larger devices
    @include grid-span(4);
    &:nth-child(even) {
      @include grid-span(4); // needed to override previous MQ since I'm only using min-width. 
    }
    &:nth-child(3n) {
      @include grid-span(4, last);
    }
    &:nth-child(3n+1) {
      @include grid-span(4, first);
    }
  }
}

我很想为此减少代码，也许更改 MQ 之间的网格可能会有所帮助，但我不知道如何？

Answer 1

我为不同的屏幕尺寸设置了不同的列数，以便间距大小保持一致。

如果您对所有网格列都有一个网格定义，那么屏幕越小 - 间距越小。例如，对于12, 0.1 的网格定义（即12 列和间距大小为列大小的0.1），在纵向手机屏幕（320 像素宽）上，每个间距will be 仅2.4 像素宽。它小得离谱，而且破坏了网格外观。

另一方面，如果您有一个用于 320 像素屏幕的 3, 0.1 网格，那么装订线大小 would be 是相当大的 10 像素。

不仅装订线尺寸在整个屏幕尺寸中保持一致，列也一样。看看本页最底部的演示：http://lolmaus.github.io/singularity-quick-spanner/ 当您调整浏览器窗口宽度时，网格中每个项目的宽度会在可预测的范围内变化。 IE。在任何设备上，它的宽度始终在 154 到 180 像素之间。

这种方法改变了您对响应式网页设计的思维模式。现在，无论设备如何，您都可以使用适合特定列数的一致块进行设计。

为了充分利用这种方法，我建议从媒体查询切换到元素查询。元素查询需要一些 JS 帮助，即您需要一个 JS 库。有几种实现方式。奇点作者EQ.js不是最理想的，但绝对是最好的。