Процент с SASS - проблемы с одним пикселем?

Question

Я хочу создать минимальную CSS-структуру. Я сделал сетчатую систему в SASS:

$width: 960px; 
width: $width; 

.grid-12 { width: $width; } 
.grid-11 { width: percentage((($width/12)*11)/$width) } 
.grid-10 { width: percentage((($width/12)*10)/$width) } 
.grid-9 { width: percentage((($width/12)*9)/$width) } 
.grid-8 { width: percentage((($width/12)*8)/$width) } 
.grid-7 { width: percentage((($width/12)*7)/$width) } 
.grid-6 { width: percentage(($width/2)/$width) } 
.grid-5 { width: percentage((($width/12)*5)/$width) } 
.grid-4 { width: percentage(($width/3)/$width) } 
.grid-3 { width: percentage(($width/4)/$width) } 
.grid-2 { width: percentage(($width/6)/$width) } 
.grid-1 { width: percentage(($width/12)/$width) } 

Это прекрасно работает, но иногда - в некоторых разрешениях, например. на моем мобильном телефоне с видом на пейзаж (960x540) некоторые элементы слишком короткие. Это происходит и при изменении размера браузера.

Что я могу сделать?

Answer 1

Для этого нет «исправления». Так происходит со всеми отзывчивыми макетами и сетчатыми системами. Существуют такие методы, как float isolation, которые могут помочь избежать ошибок округления. В противном случае ошибки 10 1px могут превратиться в ошибку 10px. Я бы не использовал это везде, но это полезно, если у вас есть макет в стиле галереи с большим количеством элементов, одинакового размера, плавающих рядом друг с другом.

Реальное решение, упомянутое в комментарии выше, состоит в том, чтобы настроить ваш дизайн так, чтобы ошибки округления 1px не имели значения. Если 1px может испортить ваш макет, отзывчивый дизайн не будет работать.

Вы не можете устранить ошибки округления, но у вас есть контроль над , где недостающие пиксели должны идти. Путем плавания влево или вправо и вложенности по-разному вы можете перемещать ошибки округления, где они будут наименее заметными. Другое решение - применить layout (вместо float/width) к последнему элементу в строке, и он будет расширяться, чтобы заполнить оставшееся пространство. Самый простой способ применения макета - overflow: hidden;, но это имеет некоторые недостатки.

Answer 2

некоторые расчеты приведут к ряду, которые не могут быть разделены на 2

иногда вы получите .5px ...

и из-за этого. у вас иногда будет 1 дополнительный пиксель