我在 Singularity 中构建了以下内容
一张 1/3 宽幅图像紧挨着一张 2/3 宽幅图像，并在下一行以相反的方式排列。这些图像与 picturefill 一起提供。但我的问题是，当我将视口(viewport)从容器最大宽度缩小到断点(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);
}
}
}
在最大宽度的三分之一和三分之二图像的高度之间在物理上是相同的，并且它们在底线对齐。在较小的视口(viewport)上，它们不同。如果我移除带有图片的排水沟，高度仍然不同。例如
@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);
}
}
如果我使用，而不是 picturefill 标记，只是清空文章标签并将这两个属性从上方添加到 scss，高度在所有文章元素上保持完全相同，无论它们是 1/3 还是 2/3。
background:red
height:10em;
带排水沟:
没有:
有谁知道可能导致视口(viewport)高度差异的原因是什么？我自己完全没有想法。 :(
最好的问候拉尔夫
最佳答案
图片高度不同的原因
图像高度差异的原因是数学上的。
为了简单起见，让我们看一下下面的列系统:
@include add-grid(4);
@include add-gutter(0.1);
上述定义的意思是:四列宽度相同，它们之间有三 (4 - 1) 个间距。每个间距的宽度等于任何列的宽度的 0.1。
现在，假设容器的宽度为 1000 像素，那么每列和每个间距的宽度是多少？
假设一列的宽度为 x px。那么一个排水沟将是 0.1x px 宽。我们可以组装一个等式:
4x + 3*(0.1x) = 1000
让我们来解决它:
4x + 0.3x = 1000
4.3x = 1000
x = 1000 / 4.3
x = 232.56
每列的宽度约为 232.56 像素!每个装订线的宽度为 232.56 * 0.1 = 23.256px。
现在，假设我们有两张图片:250x250 像素和 750x250 像素，我们将它们放入这些列中。
第一张图片将占据一列和零间距。它的宽度和高度都将等于 232.56 像素。
第二张图片将占据三列，这些列之间有两个间距。它的宽度将等于 232.56 * 3 + 23.256 * 2 = 744.192px。第二张图片的高度将等于 250 * 744.192/750 = 248.064px。
如您所见，图像的高度不匹配，这是预期的。
问题的解决方案
您可以使用复合网格来补偿高度差异。这更难计算。
一个更简单的解决方案是将图像切片以匹配现有网格!
关于网格布局的一般建议。
您为不同的断点使用了大量网格定义，但在所有这些断点(移动 View 除外)中，您具有相同的布局。
您不必为每个断点重新定义网格。事实上，您的响应式布局可以简化为以下定义:
+add-grid(3); +add-gutter(0.5);对于移动布局，不要应用任何 span。对于从最小断点开始的布局，应用跨度就可以了。
请注意，您仍然可以为其他样式应用多个断点，例如。 G。容器宽度。
要使隔离跨越适用于多行，请为每一行中的第一个子项应用清除:
&:nth-child(3n+1) { clear: both; }注意:这应该在应用 Singularity span mixin 之后完成，例如。例如:
&:nth-child(3n+1) { +grid-span(1,1); clear: both; }您可以使用通用的
grid-spanmixin 而不是特定的isolation-span。隔离是grid-spanmixin 的默认跨越技术。不要为每个 mixin 调用覆盖方向和间距，除非您试图将元素放置在声明的网格之外。
不要对相邻元素使用不同的间距大小，否则会破坏数学。
不要在每个媒体查询下应用重复的样式。理想情况下，每个 CSS 规则都应该只声明一次。如果需要，您可以创建更具体的媒体查询规则，而不是复制样式。
UPD:哦，请记住，您可以按以下格式声明列和间距:
+add-grid(235 235 235 235); +add-gutter(20);这与
+add-grid(4) 相同； +add-gutter(0.085);但更容易理解数字。
关于image - 具有相同物理像素高度的两个图像具有高度偏移。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22410352/