3

ピクセルパーフェクトグリッドを探しています。主要なフレームワークを試しましたが、どちらにも明らかな丸め誤差があります。ピクセル パーフェクトなデザインを実現しようとするときに、このようなエラーをどのように説明するかについて、会話を始めたいと思っていました。

Chrome は、目に見えるエラーがほとんどなく、最適にレンダリングされているようです。サファリは最悪です。


以下は、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/ ) ここに画像の説明を入力

4

3 に答える 3

2

私が見つけたが試していないいくつかの解決策を次に示します。

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

于 2014-12-19T17:39:10.567 に答える
2

ピクセル完璧なデザインのための流体グリッド?

Bootstrap と Foundation は流動的です。ブレークポイントまでパーセンテージを使用して独自のグリッド システムを作成できます。たとえば、600px 未満の任意のものを指定してから、600px の最小幅、900px、1200px などで、ピクセル単位のサイズのコンテナーと列の作成を開始します。これは、Masonry の実装で見られるものです。

于 2014-12-19T18:08:10.420 に答える
1

丸め誤差のないグリッド システムを作成し、最初と最後のセルがエッジと同じ高さになるようにしました。これはどこでも使用できます。

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% である必要がありますが、幸いなことに、これは通常、間隔として非常に適切な幅であり、小さすぎず、大きすぎずです。

全体の幅によっては 1 ピクセル程度のわずかな丸め誤差が生じることがありますが、これは避けられません。ただし、パーセンテージ自体には丸め誤差がないため、幅がピクセル全体に変換されてエラーが表示される最終ステップにすぎません。そして、常に切り捨てられているようで、幅をオーバーフローすることはありません。また、0.085 を掛けたときに丸められる数値を与える max-widths を選択すると、1px の丸めエラーが発生することはほとんどありません。

このシステムの最も良い点は、左右にマージンがないため、(複雑な負のマージンのトリックを使用せずに) ネストすることができ、それが機能することです (ただし、内側のスペースは多少異なります)。これが、私が独自のグリッド システムを作成することにした理由です。

于 2015-02-14T13:44:02.817 に答える