私はSingularityで以下を構築しました
幅 2/3 の画像の隣に幅 1/3 の画像があり、次の行ではその逆です。画像はピクチャーフィルで提供されます。しかし、私の問題は、コンテナーの最大幅からブレークポイント (750px) に向かってビューポートを絞り込むときです。そこでは、画像が 2 つの「列」レイアウトから 1 つの列に切り替わり、ソース ファイルの物理的なサイズがまったく同じでも高さが異なります。ピクセル単位の高さ。場合によっては数ピクセル、場合によっては 1 つだけ異なります。
背後にある削減されたセットアップは次のとおりです (Retina マークアップとその間の 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);
}
}
}
最大幅での 3 分の 1 の画像と 3 分の 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);
}
}
ピクチャフィル マークアップの代わりに記事タグを空にして、これらの 2 つのプロパティを scss に追加すると、高さが 1/3 か 2/3 かに関係なく、すべての記事要素でまったく同じになります。
background:red
height:10em;
ガター付き:
なし:
ビューポートの高さの違いがどのように変化するのか、誰にも考えられますか? 私自身は完全にアイデアがありません。:(
よろしくラルフ