style mover linea hacer ejemplos ejemplo divs div como aside css width decimal responsive-design fluid

mover - ¿Por qué usar valores de punto decimal largos en anchos de porcentaje de CSS?



hacer un div inline (4)

Me he dado cuenta en mi propio trabajo de que 3 columnas de fluido completan mucho mejor su elemento principal cuando sus anchuras se establecen en 33.333% en comparación con solo 33%. También he notado al investigar varios marcos CSS (es decir, bootstrap.css) que tienen 14 lugares decimales especificados en el ancho de sus columnas. Parece que sería excesivo o inteligente ... pero no sé cuál.

Entonces, ¿cuál es el valor / beneficio de tener tantos decimales? Según lo que he reunido, hay un debate abierto sobre si debe evitar los decimales o aprovecharlos y quiero saber si esto debería interesarme o simplemente no preocuparme por ello.


Porque 33 ≠ 33.33333 .

Si configura tres div a 33%, quedará 1% por completar. Es simplemente lógico.


Es requerido en algunos casos. Estoy trabajando en un sitio usando Twitter Bootstrap, que tiene 6 divs que abarcan todo el ancho del sitio. Si acabo de hacer el ancho de cada uno de 16.66%, se deja un espacio notable al final, si hago el ancho de 16.67%, uno de los divs se coloca en la línea de abajo. Esto significaba que los divs debían ocupar todo el espacio, tenía que establecer el ancho en 16.6667%, lo que funciona perfectamente en Chrome y Firefox, pero parece que Safari e IE redondean el punto decimal a 2 lugares, así que me queda un brecha al usarlos. Por lo tanto, a veces puede parecer excesivo, pero otras veces es realmente necesario.

Dave


Aunque los navegadores pueden redondear de forma diferente, no es necesario tener 14 decimales porque, al final, el valor, convertido en píxeles, será probablemente el mismo, sin importar si se usaron 14 o 3 decimales.

La causa de los 14 decimales es muy probable porque los desarrolladores usan un preprocesador css (como less) donde el ancho del div se calcula como
width: 100% / @columns;

Su preprocesador probablemente solo use el flotador completo, que calculó, ya que el valor CSS real, incluidos todos sus decimales, se opone a truncarlos.


Se podría argumentar que 4 decimales es sensato para la tecnología actual.

Usando width: 33.33% para 3 cols estará bien - incluso una pantalla de 4k no mostrará un espacio (99.99% de 4096px = 4.095.5px, que redondea hasta 4096px así que no hay espacio)

Pero otras razones podrían.

1 píxel en una pantalla de 4k es 1/4096 = width: 0.00024% , por lo que 4 dp garantizaría la ausencia de espacios. También estarías a salvo para pantallas de 8k ... de hecho tomaría una pantalla de 20,000px de ancho para tener alguna posibilidad de espacio si tus tamaños son precisos a 4 dp

...... compatibilidad con el navegador que permite, por supuesto! Algunos ya han notado que algunos navegadores truncan a 2 dp, spoil-sports.