Question

我一直在使用奇点大约一年，我仍然不是100％我充分利用它，或者＃34;正确＆＃34;真的。

我遇到的主要问题是你应该根据媒体查询更改网格大小。

我现在正在使用这样的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），在纵向电话屏幕（320px宽）上，每个装订线will be仅宽2.4px。它太小了，破坏了网格外观。

另一方面，如果您的320px屏幕有3, 0.1网格，那么装订线尺寸would be大约为10px。

不仅阴沟尺寸在整个屏幕尺寸上变得一致，而且列也是如此。请查看此页面上最底层的演示：http://lolmaus.github.io/singularity-quick-spanner/调整浏览器窗口宽度时，网格中每个项目的宽度会在可预测的范围内变化。 I. e。在任何设备上，它总是在154到180像素宽之间。

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

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

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

1 个答案: