如何解决和补偿子像素舍入问题？

Question

我试图解决亚像素舍入误差已经有一段时间了,但到目前为止,我一次又一次地失败了.我试图在Sass和Susy的帮助下完成这项努力.我在上次尝试中使用的mixin来自Github上的Susy问题跟踪器(我已经使用了空格,列以及按下左边/右边边缘的属性,就像那里建议的那样):

@mixin isolate($location, $context: $columns, $dir: 'ltr') {
  @if $dir == 'ltr' {
    margin-right: -100%;
    margin-left: space($location, $context);
  }
  @else if $dir == 'rtl' {
    margin-left: -100%;
    margin-right: space($location, $context);
  }
}

我的Scss如下所示:

.imggrid{
    @include with-grid-settings($gutter: 0.1%){
        $y:2;
        li{
            @include span-columns(2,12);    
            @for $x from 1 through 30
            {
                &:nth-child(#{$x}){
                    @include isolate($y,12);
                    $y: $y + 2;
                    @if $y > 12{
                       $y: 2;
                    }
                }
            }
            @include nth-omega(6n);
        }
    }
}

首先,我为图像网格创建了一个自定义装订线.然后我定义了一个变量y,以两个步骤迭代,以便能够调用isolate mixin(isolate(2,12)isolate(4,12)etc).对于大于12的值,该值在最后的for循环中重置为2.然后我跨越一列,每个李走过30张图像.每次调用迭代隔离mixin.在for循环后,我添加了@include nth-omega(6n); 在每个第六个元素之后获得一个新行.

但不知怎的,它根本不起作用.前四行缺少第一个图像,而最后一行缺少前五个元素.任何想法和建议表示赞赏.谢谢拉尔夫

Answer 1

更新:我将这些mixins调整为1索引而不是0索引.我认为这是更常见的.

你很接近,但数学不太合适.保持一切顺利是有点复杂的,所以我写了一个mixin为你照顾它.我还调整了isolate mixin,以便它使用现有的Susy $from-direction变量:

@mixin isolate($location, $context: $total-columns, $from: $from-direction) {
  $to: opposite-position($from);
  margin-#{$to}: -100%;
  margin-#{$from}: space($location - 1, $context);
}

@mixin isolate-list($columns, $context: $total-columns, $from: $from-direction) {
  $position: 1;
  $line: floor($context / $columns);

  @include span-columns($columns, $context, $from: $from);

  @for $item from 1 through $line {
    $nth: '#{$line}n + #{$item}';
    &:nth-child(#{$nth}) {
      @include isolate($position, $context, $from);
      @if $position == 1 { clear: $from; }

      $position: $position + $columns;
      @if $position > $context { $position: 1; }
    }
  }
}

使用它就像span-columns宽度和上下文一样.这就是它的全部:

.imggrid{
  li{
    @include isolate-list(4,12);
  }
}

对于任意数量的列表项,这应该适用于任何宽度.干杯!