Учет ошибок округления Сетка

Question

Я ищу идеальную сетку для пикселя. Я пробовал основные структуры, но оба имеют очевидные ошибки округления. Я надеялся начать разговор о том, как вы, ребята, учитываете такие ошибки при попытке достичь идеального дизайна пикселя.

Хром, кажется, лучший, почти без видимой ошибки. Сафари - самое худшее.

Вот снимок экрана Bootstrap сетки в Safari
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/)

Ниже приведен пример сетки Foundation в Сафари 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/)

Answer 1

Вот несколько решений, которые я нашел, но не пробовал:

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

Answer 2

сетки Жидкость для пиксель идеальный дизайн?

Бутстрап и Фонд являются текучими. Вы можете создать свою собственную систему сетки, используя проценты до точки останова, скажем, что-то под 600 пикселей, а затем на 600 пикселей минимальной ширины, 900 пикселей, 1200 пикселей и т. Д., Начните создавать контейнеры и столбцы размером в пикселях. Это то, что вы видите с некоторыми реализациями масонства.

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% * Х) - 2%, но в ширину с 2% левого края. Поскольку первая ячейка не имеет левого края, она все равно добавляет до 100% точно.

Это требует, чтобы ячейки имели интервал 2%, но, к счастью, это, как правило, довольно хорошая ширина для интервала, не слишком мало и не слишком много.

У него будет небольшая ошибка округления, иногда примерно на один пиксель, в зависимости от общей ширины, это неизбежно. Но поскольку сами проценты не имеют ошибок округления, это всего лишь последний шаг, на котором ширина делается в целые пиксели, где появляется ошибка. И, похоже, он всегда округляется, поэтому он никогда не переполняет ширину. И если вы выберете максимальную ширину, которая дает округлые числа при умножении на 0,085, вы почти никогда не увидите ошибку округления 1px.

Лучшая вещь в этой системе состоит в том, что, поскольку нет полей слева и справа, вы можете вложить их (без использования сложных трюков с отрицательным краем), и это просто работает (внутренний интервал будет несколько иным, хотя). Именно по этой причине я решил создать свою собственную сетчатую систему.