diferencia entre px y em

Question

¿Cuál es la diferencia entre px y em?

Answer 1

Ver excelente tutorial sobre CSS-Tricks:

px – em – % – pt – keyword

Answer 2

1 em = tomar tamaño de la fuente de su Documento de tamaño de fuente. Es relativo en naturaleza.

100% = tomar tamaño también del tamaño de fuente del documento.

general

12 puntos = 1 em = 100% = 16px

En uso de mejores prácticas%, ya que es en relación a su anchura, será dispositivo automático de ajuste de dispositivo.

Answer 3

Si necesita más detalles acerca de cómo las personas calculan base sobre px y em luego de tomar una decisión a sí mismo, se puede ver este artículo http://joomla2x.com/difference-px-em-web-htmlcss/

Answer 4

Meet the Unidades

1. “Ems” (em) : El "em" es una unidad escalable que se utiliza en el documento web . Un em es igual al tamaño de letra actual, por ejemplo, si el tamaño de letra del documento es 12pt, 1em equivale a 12pt. Ems son escalables en su naturaleza, por lo que 2em equivaldrían a 24pt, .5em equivaldrían a 6pt, etc. Los Ems se están volviendo cada vez más populares en documentos web debido a la escalabilidad y su naturaleza amigable para dispositivos móviles.

2. Pixeles (px): Los píxeles son unidades de tamaño fijo que se utilizan en la pantalla (es decir, para leer en la pantalla de la computadora). Un píxel es igual a en un punto en la pantalla de la computadora (la división más pequeña de la resolución de su pantalla ). Muchos diseñadores web utilizan unidades de píxeles en documentos web para producir una representación perfecta de píxeles de su sitio tal como se representa en el navegador. Un problema con la unidad de píxeles es que no escala hacia arriba para lectores con deficiencias visuales o hacia abajo para adaptarse a dispositivos móviles.

3. Puntos (pt): Los puntos se usan tradicionalmente en medios impresos (cualquier cosa que se va a imprimir en papel, etc.). Un punto es igual a 1/72 de una pulgada. Los puntos se parecen mucho a los píxeles, ya que son unidades de tamaño fijo y no se pueden escalar en tamaño.

4. Porcentaje (%): El porcentaje de unidad es muy parecido a la unidad "em", excepto por un pocas diferencias fundamentales. En primer lugar, el tamaño de fuente actual es igual al 100% (es decir, 12pt = 100%). Mientras utiliza la unidad de porcentaje , su texto sigue siendo totalmente escalable para dispositivos móviles y para el acceso.

Entonces, ¿cuál es la diferencia?

Es fácil entender la diferencia entre las unidades de tamaño de fuente cuando las ve en acción. Generalmente, 1em = 12pt = 16px = 100%.Cuando se utilizan estos tamaños de fuente, vamos a ver lo que ocurre cuando se aumenta el tamaño de la fuente base (con el selector CSS cuerpo) del 100% al 120%

Como se puede ver, tanto las unidades em y porcentajes se hacen más grandes a medida que aumenta el tamaño de fuente base, pero los píxeles y los puntos no. Puede ser fácil establecer un tamaño absoluto para su texto, pero es mucho más fácil para sus visitantes usar texto escalable que se puede mostrar en cualquier dispositivo o máquina. Por esta razón, las unidades em y por ciento son preferidas para el texto del documento web.

Em frente al porcentaje

Hemos decidido que las unidades de puntos y píxeles no son necesariamente los más adecuados para documentos web, lo que nos deja con las unidades em y porcentajes. En teoría, tanto el em como el porcentaje de unidades son idénticos, pero en la aplicación, en realidad tienen algunas diferencias menores que es importante tener en cuenta.

En el ejemplo anterior, usamos la unidad de porcentaje como nuestro tamaño de fuente base (en la etiqueta de cuerpo). Si cambia el tamaño de fuente base de percent a ems (es decir, body {font-size: 1em;}), probablemente no notará una diferencia. Veamos qué sucede cuando "1em" es el tamaño de fuente de nuestro cuerpo, y cuando el cliente altera la configuración de "Tamaño de texto" de su navegador (esto está disponible en algunos navegadores, como Internet Explorer).

Cuando el tamaño del texto del navegador del cliente está establecido en "medio", no hay diferencia entre el cc y el porcentaje. Sin embargo, cuando se modifica la configuración, la diferencia es bastante grande. En la configuración "Más pequeña", los ccsme son mucho más pequeños que el porcentaje, y cuando están en la configuración "Más grande", es todo lo contrario, con ccms que muestran mucho más que el porcentaje. Mientras que algunos podrían argumentar que las unidades em se están escalando como realmente se pretende, en la aplicación práctica, el texto em escala demasiado abruptamente, con el texto más pequeño que se vuelve difícilmente legible en algunas máquinas cliente.

Información tomada de http://kyleschaeffer.com