Учет ошибок округления сетки
Я в поисках идеальной сетки пикселей. Я пробовал основные структуры, но оба имеют очевидные ошибки округления. Я надеялся начать разговор о том, как вы, ребята, учитываете такие ошибки, пытаясь добиться идеального дизайна пикселей.
Похоже, что Chrome отображает лучшее без видимой ошибки. Сафари худшее.
Вот снимок экрана с сеткой начальной загрузки в 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/)
Вот пример основы сетки в 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/)
3 ответа
Вот пара решений, которые я нашел, но еще не пробовал:
Жидкостные сетки для идеального дизайна пикселей?
Бутстрап и фундамент текучие. Вы можете создать свою собственную систему сетки, используя проценты вплоть до точки останова, скажем, что-нибудь под 600px, а затем с минимальной шириной 600px, 900px, 1200px и т. Д., Начните создавать контейнеры и столбцы размером в пиксели. Это то, что вы видите в некоторых реализациях Masonry.
Я сам создал сетку без ошибок округления, где первая и последняя ячейки находятся на одном уровне с краями, которые я использую везде:
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.
Лучше всего в этой системе то, что поскольку поля слева и справа отсутствуют, вы можете вкладывать их (без использования сложных приемов с отрицательным полем), и это просто работает (хотя внутренний интервал будет несколько другим). По этой причине я решил создать свою собственную систему сетки.