html - codes - ¿Se respetan los decimales en un ancho CSS?
panel html css (7)
Aunque puede parecer que los píxeles fraccionarios se redondean en elementos individuales (como lo demuestra @SkillDrick ) , es importante saber que los píxeles fraccionarios se respetan realmente en el modelo de caja real .
Esto se puede ver mejor cuando los elementos se apilan uno junto al otro (o uno encima del otro); en otras palabras, si tuviera que colocar 400 divs de 0.5 píxeles de lado a lado, tendrían el mismo ancho que un solo div de 200 píxeles. Si todos ellos realmente se redondearan a 1px (como implicaría mirar elementos individuales) esperaríamos que la div 200px sea la mitad de larga.
Esto se puede ver en este fragmento de código ejecutable:
body {
color: white;
font-family: sans-serif;
font-weight: bold;
background-color: #334;
}
.div_house div {
height: 10px;
background-color: orange;
display: inline-block;
}
div#small_divs div {
width: 0.5px;
}
div#large_div div {
width: 200px;
}
<div class="div_house" id="small_divs">
<p>0.5px div x 400</p>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
<p>200px div x 1</p>
<div></div>
</div>
Algo que me he estado preguntando durante un tiempo mientras hacía diseño CSS.
¿Se respetan los decimales en anchos css? ¿O son redondeados?
.percentage
{
width: 49.5%;
}
o
.pixel
{
width: 122.5px;
}
El ancho se redondeará a un número entero de píxeles .
Aunque no sé si todos los navegadores lo redondearán de la misma manera. Todos parecen tener una estrategia diferente al redondear porcentajes de subpíxeles. Si está interesado en los detalles del redondeo de sub-píxeles en diferentes navegadores, hay un excelente artículo sobre ElastiCSS .
Edición : He probado la demostración de @ Skilldrick en algunos navegadores por curiosidad. Cuando se usan valores de píxeles fraccionarios (no porcentajes, funcionan como se sugiere en el artículo I vinculado) IE9p7 y FF4b7 parecen redondear al píxel más cercano, mientras que Opera 11b, Chrome 9.0.587.0 y Safari 5.0.3 truncan los lugares decimales. No es que esperara que tuvieran algo en común después de todo ...
Es interesante que entre la respuesta de natekoechley y la de Olex Ponomarenko, los valores exactos se almacenan en la memoria y se tienen en cuenta para algunas cosas, pero no para todas.
Incluso cuando el número se redondea cuando se pinta la página, el valor completo se conserva en la memoria y se utiliza para el cálculo secundario posterior. Por ejemplo, si su caja de 100.4999px pinta a 100px, su niño con un ancho del 50% se calculará como .5 * 100.4999 en lugar de .5 * 100. Y así a niveles más profundos.
He creado sistemas de diseño de cuadrícula profundamente anidados donde los anchos de los padres son ems, y los niños son porcentajes, e incluir hasta cuatro puntos decimales en sentido ascendente tuvo un impacto notable.
Caso de Edge, claro, pero algo a tener en cuenta.
Los elementos tienen que pintar a un número entero de píxeles, y como cubren las otras respuestas, los porcentajes son respetados.
Una nota importante es que los píxeles en este caso significan píxeles css , no píxeles de pantalla, por lo que un contenedor de 200 píxeles con un 50.7499% de niños se redondeará a píxeles píxeles de 101 píxeles , que luego se procesarán en 202 píxeles en una pantalla de retina, y no en 400 *. 507499 ~ = 203px.
La densidad de la pantalla se ignora en este cálculo, y no hay forma de dimensionar un elemento para tamaños de subpíxeles de retina específicos. Los fondos o bordes de los elementos no se pueden representar a menos de 1 tamaño de píxel css , aunque el tamaño del elemento real podría ser inferior a 1 píxel css, como mostró Sandy Gifford.
Parece que redondean los valores al entero más cercano; Pero estoy viendo inconsistencia en Chrome, Safari y Firefox.
Por ejemplo, si el 33.3% convierte a 420.945px
Chrome y Firexfox lo muestran como 421px. mientras que safari muestra su como 420px.
Esto parece que Chrome y Firefox siguen la lógica del piso y del techo, mientras que Safari no lo hace. Esta página parece discutir el mismo problema.
Si es un porcentaje de ancho, entonces sí, se respeta . Como señaló Martin, las cosas se descomponen cuando se obtienen píxeles fraccionarios, pero si sus valores porcentuales producen un valor de píxel entero (por ejemplo, 50.5% de 200 px en el ejemplo) obtendrá un comportamiento razonable y esperado.
Edición: he actualizado el ejemplo para mostrar qué sucede con los píxeles fraccionarios (en Chrome, los valores están truncados, por lo que 50, 50.5 y 50.6 muestran el mismo ancho).