Question

我正在寻找像素完美网格。我尝试过主要的框架，但都有明显的舍入错误。我希望在尝试实现像素完美设计时，就如何解决这些错误开始讨论。

Chrome似乎渲染效果最好，几乎没有可见错误。 Safari是最糟糕的。

以下是Safari中Bootstrap Grid的屏幕截图 HTML：

 <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/） enter image description here

以下是Safari中基础网格的示例 HTML：

  </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/） enter image description here

Answer 1

以下是我发现的一些解决方案，但尚未尝试过：

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

Answer 2

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

Bootstrap和Foundation是流动的。您可以通过使用百分比达到断点来创建自己的网格系统，比如600px以下的任何值，然后是600px的最小宽度，900px，1200px等，开始制作像素大小的容器和列。这是你在一些砌体实现中看到的。

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舍入误差。

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

考虑舍入误差网格

3 个答案: