twitter-bootstrap - 计算舍入误差网格

Question

我正在寻找一个像素完美的网格。我已经尝试过主要的框架，但都有明显的舍入错误。我希望就你们在尝试实现像素完美设计时如何解决此类错误展开对话。

Chrome 似乎呈现出最好的效果，几乎没有明显的错误。Safari是最糟糕的。

这是 Safari
html 中 Bootstrap Grid 的屏幕截图：

 <div class="container">
  <!-- Example row of columns -->

 <div class="row">
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>
     <div class="col-md-1"><div class="content"></div></div>

 </div>

<div class="row">
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>
    <div class="col-md-2"><div class="content"></div></div>


</div>


<div class="row">
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>
    <div class="col-md-3"><div class="content"></div></div>



</div>

<div class="row">
    <div class="col-md-4"><div class="content"></div></div>
    <div class="col-md-4"><div class="content"></div></div>
    <div class="col-md-4"><div class="content"></div></div>

</div>

<div class="row">
    <div class="col-md-6"><div class="content"></div></div>
    <div class="col-md-6"><div class="content"></div></div>


</div>

<div class="row">
    <div class="col-md-12"><div class="content"></div></div>


</div>


</div>

（jsFiddle：http: //jsfiddle.net/gnrhca1p/）

以下是 Safari html 中的 Foundation 网格示例：

  </div>
  <div class="row">
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>
      <div class="medium-2 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>
      <div class="medium-3 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-4 columns"><div class="content"></div></div>
      <div class="medium-4 columns"><div class="content"></div></div>
      <div class="medium-4 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-6 columns"><div class="content"></div></div>
      <div class="medium-6 columns"><div class="content"></div></div>


  </div>
  <div class="row">
      <div class="medium-12 columns"><div class="content"></div></div>


  </div>

（jsFiddle：http: //jsfiddle.net/）

Answer 1

以下是我找到但尚未尝试过的几个解决方案：

https://github.com/zurb/foundation/issues/3230

Answer 2

用于像素完美设计的流体网格？

Bootstrap 和 Foundation 是流动的。您可以通过使用直到断点的百分比来创建自己的网格系统，例如低于 600 像素的任何内容，然后在 600 像素的最小宽度、900 像素、1200 像素等处，开始制作以像素为单位的容器和列。这就是你在一些 Masonry 实现中看到的。

Answer 3

我已经为自己制作了一个没有舍入误差的网格系统，并且第一个和最后一个单元格与边缘齐平，我在任何地方都使用它：

https://jsfiddle.net/8hz0wycv/

CSS 是从这个 Less CSS 编译而来的：

@colBaseUnit: 8.5%;

.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12 {
    float: left;
    margin-left: 2%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    &:first-child {
        margin-left: 0;
    }
}
.span1 {width: ((1 * @colBaseUnit) - 2%)}
.span2 {width: ((2 * @colBaseUnit) - 2%)}
.span3 {width: ((3 * @colBaseUnit) - 2%)}
.span4 {width: ((4 * @colBaseUnit) - 2%)}
.span5 {width: ((5 * @colBaseUnit) - 2%)}
.span6 {width: ((6 * @colBaseUnit) - 2%)}
.span7 {width: ((7 * @colBaseUnit) - 2%)}
.span8 {width: ((8 * @colBaseUnit) - 2%)}
.span9 {width: ((9 * @colBaseUnit) - 2%)}
.span10 {width: ((10 * @colBaseUnit) - 2%)}
.span11 {width: ((11 * @colBaseUnit) - 2%)}
.span12 {width: ((12 * @colBaseUnit) - 2%)}

它之所以有效，是因为 102% / 12 是 8.5% 除了第一个单元格之外的所有单元格都是 (8.5% * X) - 2% 宽但有 2% 的左边距。由于第一个单元格没有左边距，它仍然精确地加起来为 100%。

它要求单元格有 2% 的间距，但幸运的是，这通常是一个非常好的间距宽度，不会太小也不会太多。

根据总宽度，有时会有一个像素左右的轻微舍入误差，这是不可避免的。但是由于百分比本身没有四舍五入误差，所以它只是将宽度转换为出现错误的整个像素的最后一步。它似乎总是向下舍入，所以它永远不会溢出宽度。如果你选择最大宽度乘以 0.085 时给出整数，你几乎不会看到 1px 的舍入误差。

这个系统最好的一点是，由于没有左右边距，你可以嵌套它（不使用复杂的负边距技巧）并且它可以正常工作（虽然内部间距会有所不同）。这就是我决定制作自己的网格系统的原因。