susy 网格像素舍入错误
susy grid pixel rounding error
嘿,我试图通过使用隔离方法修复 susy 子像素舍入错误,但不知何故它仍然存在于 chrome 中......无法弄清楚我到底做错了什么,非常感谢您的帮助,非常感谢
http://codepen.io/HendrikEng/pen/PzZkjX
html:
<div class="l-wrap-page">
<div class="l-wrap-main">
<div class="c-block">
<div class="c-block__item">
<img src="http://lorempixel.com/400/200/">
</div>
<div class="c-block__item">
<div class="c-block-article">
<p>text text text texte text text
</p>
</div>
</div>
</div>
<div class="c-block">
<div class="c-block__item">
<img src="http://lorempixel.com/400/200/">
</div>
<div class="c-block__item">
<div class="c-block-article">
<p>text text text texte text text
</p>
</div>
</div>
</div>
</div> </div>
scss:
@import "breakpoint";
@import "susy";
@mixin cf {
&:after {
clear: both;
content: '';
display: table;
}
}
$susy:(
columns: 12,
container: 100%,
output: float,
gutters: 0,
global-box-sizing: border-box,
debug: (
image: show,
output: overlay,
color: rgba(77, 171, 252, .2),
toggle: top left,
),
);
@include border-box-sizing;
.l-wrap-page {
@include container;
@include show-grid();
}
.l-wrap-main {
@include span(12 of 12);
}
.c-block {
@include cf;
@include span(12);
@include show-grid();
&:nth-child(even) {
background-color: lightblue;
.c-block__item {
@include nested(12) {
&:nth-child(1) {
@include span(isolate 3 at 9 last);
}
&:nth-child(2) {
@include span(isolate 3 at 3 first);
}
}
}
}
&:nth-child(odd) {
background-color: pink;
.c-block__item {
@include nested(12) {
&:nth-child(1) {
@include span(isolate 3 at 3 first);
}
&:nth-child(2) {
@include span(isolate 3 at 9 last);
}
}
}
}
&:last-child {
@include last;
}
}
我不确定演示的样子,所以很难知道问题出在哪里。以下是一些可能有帮助的注意事项:
Chrome 在背景渐变上总是存在亚像素舍入问题。这意味着 Grid Overlay 有亚像素舍入误差,即使实际布局没有。该问题已在文档中注明。不应将网格叠加层视为在所有视口尺寸下都是像素完美的。
隔离并不能完全解决子像素舍入问题,但它应该可以解决大部分由此产生的问题。隔离意味着您永远不会偏离超过一个像素,并且项目不会相互推到下一行。您可能仍然存在单像素间距问题。
嘿,我试图通过使用隔离方法修复 susy 子像素舍入错误,但不知何故它仍然存在于 chrome 中......无法弄清楚我到底做错了什么,非常感谢您的帮助,非常感谢
http://codepen.io/HendrikEng/pen/PzZkjX
html:
<div class="l-wrap-page">
<div class="l-wrap-main">
<div class="c-block">
<div class="c-block__item">
<img src="http://lorempixel.com/400/200/">
</div>
<div class="c-block__item">
<div class="c-block-article">
<p>text text text texte text text
</p>
</div>
</div>
</div>
<div class="c-block">
<div class="c-block__item">
<img src="http://lorempixel.com/400/200/">
</div>
<div class="c-block__item">
<div class="c-block-article">
<p>text text text texte text text
</p>
</div>
</div>
</div>
</div> </div>
scss:
@import "breakpoint";
@import "susy";
@mixin cf {
&:after {
clear: both;
content: '';
display: table;
}
}
$susy:(
columns: 12,
container: 100%,
output: float,
gutters: 0,
global-box-sizing: border-box,
debug: (
image: show,
output: overlay,
color: rgba(77, 171, 252, .2),
toggle: top left,
),
);
@include border-box-sizing;
.l-wrap-page {
@include container;
@include show-grid();
}
.l-wrap-main {
@include span(12 of 12);
}
.c-block {
@include cf;
@include span(12);
@include show-grid();
&:nth-child(even) {
background-color: lightblue;
.c-block__item {
@include nested(12) {
&:nth-child(1) {
@include span(isolate 3 at 9 last);
}
&:nth-child(2) {
@include span(isolate 3 at 3 first);
}
}
}
}
&:nth-child(odd) {
background-color: pink;
.c-block__item {
@include nested(12) {
&:nth-child(1) {
@include span(isolate 3 at 3 first);
}
&:nth-child(2) {
@include span(isolate 3 at 9 last);
}
}
}
}
&:last-child {
@include last;
}
}
我不确定演示的样子,所以很难知道问题出在哪里。以下是一些可能有帮助的注意事项:
Chrome 在背景渐变上总是存在亚像素舍入问题。这意味着 Grid Overlay 有亚像素舍入误差,即使实际布局没有。该问题已在文档中注明。不应将网格叠加层视为在所有视口尺寸下都是像素完美的。
隔离并不能完全解决子像素舍入问题,但它应该可以解决大部分由此产生的问题。隔离意味着您永远不会偏离超过一个像素,并且项目不会相互推到下一行。您可能仍然存在单像素间距问题。