Question

我想构建我的最小CSS框架。我在SASS做了一个网格系统：

$width: 960px;
width: $width;

.grid-12 { width: $width; }
.grid-11 { width: percentage((($width/12)*11)/$width) }
.grid-10 { width: percentage((($width/12)*10)/$width) }
.grid-9 { width: percentage((($width/12)*9)/$width) }
.grid-8 { width: percentage((($width/12)*8)/$width) }
.grid-7 { width: percentage((($width/12)*7)/$width) }
.grid-6 { width: percentage(($width/2)/$width) }
.grid-5 { width: percentage((($width/12)*5)/$width) }
.grid-4 { width: percentage(($width/3)/$width) }
.grid-3 { width: percentage(($width/4)/$width) }
.grid-2 { width: percentage(($width/6)/$width) }
.grid-1 { width: percentage(($width/12)/$width) }

它很有效，但有时候 - 在某些决议中，例如。在我的移动横向视图（960x540）中，有些元素的1px太短了。当我调整浏览器大小时也会发生这种情况

我该怎么办？

Answer 1

某些计算会产生一个不能除以2的数字

有时你会得到.5px ......

因此。你有时会有一个额外的像素

Answer 2

此处没有“修复”。这就是所有响应式布局和网格系统的方式。像float isolation这样的技术可以帮助防止舍入错误成倍增加。否则，10 1px个错误可能会变成10px错误。我不会在任何地方使用它，但如果你有一个画廊风格的布局，有很多元素，大小相同，彼此相邻，那就很有用。

上面评论中提到的真正解决方案是调整您的设计，以便1px舍入错误无关紧要。如果1px可能会破坏您的布局，则响应式设计将无法正常工作。

您无法消除舍入错误，但您可以控制缺少的像素应该去哪里。通过向左或向右浮动事物以及以不同方式嵌套，您可以将舍入错误移动到最不明显的位置。另一种解决方案是将layout（而不是float / width）应用于行中的最后一个元素，它将展开以填充剩余空间。应用布局的最简单方法是使用overflow: hidden;，但这有一些缺点。

SASS的百分比 - 一个像素问题？

2 个答案: