有一个像素问题的百分比？
有一个像素问题的百分比？
提问于 2014-01-22 15:43:56
我想要构建我的最小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)，有些元素太短了。当我调整浏览器的大小时，也会发生这种情况。
我能做什么?
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-23 02:11:43
这个问题没有“解决办法”。这就是它对所有响应性布局和网格系统的方式。有些技术，如浮子隔离，可以帮助避免舍入错误的乘积。否则，10个1px错误可能转化为10px错误。我不会在任何地方都使用它，但是如果你有一个有很多元素的画廊风格的布局，所有相同大小的元素在一起浮动的话，那是很有用的。
以上评论中提到的真正解决方案是调整您的设计，这样1px舍入错误就不重要了。如果1px破坏了您的布局，则响应性设计将无法工作。
您不能消除舍入错误，但您可以控制丢失像素的位置。通过向左或向右浮动物体，并以不同的方式嵌套，您可以将舍入错误移动到最不引人注目的位置。另一种解决方案是将layout (而不是float/width)应用于行中的最后一个元素，它将展开以填充剩余的空间。应用布局的最简单方法是使用overflow: hidden;，但这有一些缺点。
Stack Overflow用户
发布于 2014-01-22 17:06:36
一些计算结果将得到一个不能除以2的数字。
有时你会得到.5px ..。
就因为这个。有时你会有一个额外的像素
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21287431
复制相关文章
相似问题
腾讯云开发者
