Зачем использовать значения длинной десятичной точки в процентной ширине CSS?

Я заметил в своей работе, что 3 жидкостных колонны намного лучше заполняют свой родительский элемент, когда их ширина установлена на 33.333%, а не только на 33%. Я также заметил, что при изучении различных фреймворков CSS (то есть bootstrap.css) они имеют 14 десятичных знаков, указанных в их ширинах столбцов! Кажется, что это было бы чрезмерным или умным... но я не знаю, что.

Итак, какова ценность/польза от наличия так много десятичных знаков? Из того, что я собрал, открыта дискуссия о том, следует ли избегать десятичных знаков или использовать их, и я хочу знать, может ли это быть интересным для меня или просто не беспокоиться об этом.

Ответ 1

Это требуется в некоторых случаях. Я работаю над сайтом, использующим загрузочный лоток Twitter, который имеет 6 разделов, растягивающих всю ширину сайта. Если я просто сделаю ширину каждого из 16,66%, заметный пробел останется в конце, если я сделаю ширину 16,67%, один из divs будет нажат на строку ниже. Это означало, чтобы divs заполнили полный пробел, мне пришлось установить ширину 16,6667%, которая отлично работает в Chrome и Firefox, но кажется, что Safari и IE округляют десятичную точку до 2-х мест, поэтому мне остается при использовании. Поэтому иногда это может показаться чрезмерным, но в других случаях оно действительно необходимо.

Dave

Ответ 2

Можно утверждать, что 4 десятичных знака разумны для современных технологий.

Использование width: 33.33% для 3 колод будет хорошо - даже экран 4k не будет показывать пробел (99,99% от 4096 пикселей = 4095,5 пикселя, что составляет до 4096 пикселей, так что нет разрыва)

Но другие отношения могут быть.

1 пиксель на экране 4k равен 1/4096 = width: 0.00024%, поэтому 4 d.p. не будет гарантировать никаких пробелов. Youd быть безопасным для 8k экранов тоже... на самом деле itd возьмите экран шириной 20 000 пикселей, чтобы иметь хоть какие-то шансы на разрыв, если ваши размеры точны 4 dp

... поддержка браузера позволяет, конечно! Некоторые уже отметили, что некоторые браузеры обрезают до 2 д.п., spoil-sports.

Ответ 3

В то время как браузеры могут быть разными, действительно нет необходимости иметь 14 десятичных знаков, потому что в конечном итоге значение, преобразованное в пиксели, будет, вероятно, одинаковым, независимо от того, использовались ли 14 или 3 десятичных разряда.

Причина 14 десятичных знаков, скорее всего, потому, что разработчики используют css-препроцессор (например, меньше), где вычисляется ширина div, например, width: 100% / @columns;

Их препроцессор, вероятно, просто использует полный float, который он вычислил, так как фактическое значение css, включая все его десятичные числа, в противодействии их усечению.

Ответ 4

Потому что 33 ≠ 33.33333.

Если вы установите три div до 33%, осталось 1% для заполнения. Это просто логично.

Ответ 5

Запись этого в качестве других ответов на самом деле не использует никаких конкретных фактов или данных.

Люди, которые делают Sass, должны реализовать эту функцию, вероятно, хороший пример для подражания.

Уровень точности по умолчанию в node-sass составляет 5 десятичных знаков, что, безусловно, является решением, которое они приняли, поскольку значения с плавающей запятой JS могут иметь более 5 цифр.

https://github.com/sass/node-sass#precision

Проект Dart-Sass также упоминает:

По умолчанию Dart Sass имеет достаточно высокую точность для всех существующих браузеров, и его настраиваемость сделает код существенно менее эффективным.

Кажется, достаточно 5 десятичных разрядов, поскольку окна просмотра браузера, как правило, доведены до максимума в тысячах (<10 ^ 4), а точность субпикселя не лучше одного десятичного разряда (<10 ^ (-1))

10 ^ 4/10 ^ (-1) = 10 ^ 5, поэтому 5 десятичных знаков должно быть достаточно

Ответ 6

Bootstrap 4.3 использует 6 знаков после запятой. Это соответствует стандарту float32. (32-битный стандарт)