1

我在 Singularity 中构建了以下内容 三分之一二三分之二图像光栅

1/3 宽图像旁边是 2/3 宽图像,下一行则相反。图像配有图片填充。但是我的问题是,当我将视口从容器最大宽度缩小到断点(750px)时,图像从两个“列”布局切换到一列,即使源文件具有完全相同的物理高度,它的高度也不同像素高度。它们有时相差几个像素,有时只有一个。

不同的高度

后面的简化设置如下(省略了视网膜标记和中间的 2 个断点):

<section class="pro-main" role="main">
    <section class="pro-thirds">
        <article class="pro-samples imgparent">
            <a class="p-ov-liner" href="#">
                <span data-picture data-alt="onethird">
                    <span data-src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg"></span>
                    <span data-src="/img/projekte-gpfinestsolution-eindrittel-341x347.jpg" data-media="(min-width: 750px)"></span>
                    <noscript><img src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg" alt="img1"></noscript>
                </span>
                <div class="bottombox"></div>
            </a>
        </article>
        <article class="pro-samples imgparent">
            <a class="p-ov-liner" href="#">
                <span data-picture data-alt="twothird">
                    <span data-src="/img/projekte-gplab-zweidrittel-659x324.jpg"></span>
                    <span data-src="/img/projekte-gplab-zweidrittel-704x347.jpg" data-media="(min-width: 750px)"></span>
                    <noscript><img src="/img/projekte-gplab-zweidrittel-659x324.jpg" alt="twothird"></noscript>
                </span>
                <div class="bottombox"></div>
            </a>
        </article>
        <article class="pro-samples imgparent">
            <a class="p-ov-liner" href="#">
                <span data-picture data-alt="twothird">
                    <span data-src="/img/projekte-gplab-zweidrittel-659x324.jpg"></span>
                    <span data-src="/img/projekte-gplab-zweidrittel-704x347.jpg" data-media="(min-width: 750px)"></span>
                    <noscript><img src="/img/projekte-gplab-zweidrittel-659x324.jpg" alt="twothird"></noscript>
                </span>
                <div class="bottombox"></div>
            </a>
        </article>
        <article class="pro-samples imgparent">
            <a class="p-ov-liner" href="#">
                <span data-picture data-alt="onethird">
                    <span data-src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg"></span>
                    <span data-src="/img/projekte-gpfinestsolution-eindrittel-341x347.jpg" data-media="(min-width: 750px)"></span>
                    <noscript><img src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg" alt="img1"></noscript>
                </span>
                <div class="bottombox"></div>
            </a>
        </article>
    </section>
</section>

断点和奇点设置如下:

// Baseline breaks
$baseline675: 675px 849px;
$baseline850: 850px 1074px;
$baseline1075: 1075px 1199px;
$baselineMAX: 1200px;
// Container breaks
$container600: 600px;
$container750: 750px;
$container850: 850px;
$container990: 990px;
$container1100: 1100px;
$container1200: 1200px;
// Singularity
$grids: 6;
$grids: add-grid(9 at 675px);
$grids: add-grid(12 at 850px);
$grids: add-grid(15 at 1075px);
$grids: add-grid(18 at 1200px);

$gutters: 1/3;

$output:'isolation';

样式:

.pro-main,
.pro-thirds {
    @extend %clearfix;
}

.pro-samples {
    @include trailer(0.5);
        &:last-child {
            @include trailer(2);
        }
    @include switch-baseline(850px 1074px) {
        &:nth-child(4n+1) {
            @include isolation-span(4, 1, 'right', $gutter:.5);
        }
        &:nth-child(4n+4) {
            @include isolation-span(4, 9, 'right', $gutter:0);
        }
        &:nth-child(4n+2) {
            @include isolation-span(8, 5, 'right', $gutter:0);
        }
        &:nth-child(4n+3) {
            @include isolation-span(8, 1, 'right', $gutter:.5);
        }
        &:last-child {
            @include trailer(2);
        }
    }
    @include breakpoint(1075px 1199px) {
        &:nth-child(4n+1) {
            @include isolation-span(5, 1, 'right', $gutter:.5);
        }
        &:nth-child(4n+4) {
            @include isolation-span(5, 11, 'right', $gutter:0);
        }
        &:nth-child(4n+2) {
            @include isolation-span(10, 6, 'right', $gutter:0);
        }
        &:nth-child(4n+3) {
            @include isolation-span(10, 1, 'right', $gutter:.5);
        }
        &:last-child {
            @include trailer(2);
        }
    }
    @include breakpoint(1200px) {
        &:nth-child(4n+1) {
            @include isolation-span(6, 1, 'right', $gutter:.5);
        }
        &:nth-child(4n+4) {
            @include isolation-span(6, 13, 'right', $gutter:0);
        }
        &:nth-child(4n+2) {
            @include isolation-span(12, 7, 'right', $gutter:0);
        }
        &:nth-child(4n+3) {
            @include isolation-span(12, 1, 'right', $gutter:.5);
        }
        &:last-child {
            @include trailer(2);
        }
    }
}

在最大宽度的三分之一和三分之二图像的高度之间,它们在物理上是相同的,并且它们在底线对齐。在较小的视口上,它们有所不同。如果我移除带有图片的排水沟,高度仍然不同。例如

    @include breakpoint(1075px 1199px) {
        &:nth-child(4n+1) {
            @include isolation-span(5, 1, 'right', $gutter:0);
        }
        &:nth-child(4n+4) {
            @include isolation-span(5, 11, 'right', $gutter:0);
        }
        &:nth-child(4n+2) {
            @include isolation-span(10, 6, 'right', $gutter:0);
        }
        &:nth-child(4n+3) {
            @include isolation-span(10, 1, 'right', $gutter:0);
        }
        &:last-child {
            @include trailer(2);
        }
    }

如果我使用,而不是图片填充标记,只需清空文章标签并将这两个属性从上方添加到 scss,无论它们是 1/3 还是 2/3,所有文章元素的高度都保持完全相同。

 background:red
 height:10em; 

带排水沟:

带排水沟的红色

并且没有:

没有排水沟的红色

有谁知道什么可能导致视口上的高度差异?我自己完全没有想法。:(

最好的问候拉尔夫

4

1 回答 1

1

图像高度不同的原因

图像高度不同的原因是数学上的。

为简单起见,让我们看一下以下列系统:

@include add-grid(4);
@include add-gutter(0.1);

上面的定义意味着:四列宽度相同,在它们之间有三(4-1)个排水沟。每个装订线的宽度等于任何列的 0.1 宽度。

现在,假设容器的宽度是 1000 像素,那么每列和每个装订线的宽度是多少?

假设一列是 x px 宽。然后一个排水沟将是 0.1x 像素宽。我们可以组装一个方程:

4x + 3*(0.1x) = 1000

让我们解决它:

4x + 0.3x = 1000
4.3x = 1000
x = 1000 / 4.3
x = 232.56

每列的宽度约为 232.56px!每个排水沟都是 232.56 * 0.1 = 23.256px 宽。

现在,假设我们有两个图像:250x250 像素和 750x250 像素,我们将它们放入这些列中。

第一个图像将占据一列和零个装订线。它的宽度和高度都将等于 232.56 像素。

第二个图像将占据三列和这些列之间的两个装订线。它的宽度将等于 232.56 * 3 + 23.256 * 2 = 744.192px。第二张图片的高度将等于 250 * 744.192 / 750 = 248.064px。

如您所见,图像的高度不匹配,这是意料之中的。

问题的解决方案

您可以使用复合网格来补偿高度差异。这个比较难计算。

一个更简单的解决方案是对图像进行切片以匹配现有网格!

网格布局的一般建议。

  1. 您为不同的断点使用了许多网格定义,但在所有断点(移动视图除外)中,您具有相同的布局。

    您不必为每个断点重新定义网格。实际上,您的响应式布局可以简化为以下定义:

    +add-grid(3);
    +add-gutter(0.5);
    

    对于移动布局,不要应用任何跨度。对于从最小断点开始的布局,应用跨度就可以了。

    请注意,您仍然可以为其他样式应用多个断点,例如容器宽度。

  2. 对于跨越多行的隔离,请为每行中的第一个子应用清除:

    &:nth-child(3n+1) { clear: both; }
    

    注意:这应该在应用 Singularity span mixin 之后完成,例如:

    &:nth-child(3n+1) {
      +grid-span(1,1);
      clear: both;
    }
    
  3. 您可以使用 common grid-spanmixin 而不是特定的isolation-span. 隔离是grid-spanmixin 的默认跨越技术。

  4. 除非您尝试将元素从声明的网格中定位,否则不要为每个 mixin 调用覆盖方向和装订线。

  5. 不要对相邻元素使用不同的排水沟大小,否则会破坏数学。

  6. 不要在每个媒体查询下应用重复的样式。理想情况下,每个 CSS 规则应该只声明一次。如果需要,您可以创建更具体的媒体查询规则,而不是复制样式。

  7. UPD:哦,请记住,您可以按以下格式声明列和装订线:

    +add-grid(235 235 235 235);
    +add-gutter(20);
    

    这与+add-grid(4); +add-gutter(0.085);理解数字相同,但更容易理解。

于 2014-03-18T18:05:11.403 回答