En CSS, ¿cuál es la diferencia entre em y px?


Respuesta 1:

Al final, son todos píxeles

En última instancia, el navegador web le dice al sistema operativo que le diga a un controlador de pantalla que coloque algo en una pantalla en píxeles.

Pero ese "píxel" es un píxel físico. Es lo que podríamos llamar un "píxel del dispositivo".

No estás hablando de "píxeles del dispositivo". Estás hablando de CSS Pixels.

Píxeles CSS! == Píxeles

Un "CSS Pixel" es más o menos similar a un píxel del dispositivo. [1] Un CSS Pixel se basa en esta idea de un "píxel de referencia" que es el ángulo visual en un dispositivo con una densidad de píxeles de 96 ppp a aproximadamente un brazo de distancia. [2] A través del poder de las matemáticas, el "píxel de referencia" podría terminar siendo 1.3 mm en una pantalla. Pero, hay varias razones que pueden no ser el caso.

Es importante comenzar con el punto básico de que px no significa "píxel en una pantalla".

Hay diferentes unidades de medida en CSS

Hay dos categorías principales de sus unidades de medida [3]:

  1. unidades absolutas unidades relativas

si es una "unidad absoluta", entonces esa unidad de medida tiene una relación con algo en el mundo físico.

Si es una unidad relativa, entonces el valor se calcula en una unidad absoluta.

Entonces px vs em

px es una "unidad absoluta"; el motor CSS le dirá al navegador que use esa "longitud" para dimensionar. El navegador y el sistema operativo resolverán cómo se compara esa longitud con un "píxel del dispositivo" y lo renderizarán. Px tiene una relación estática con ese "píxel de referencia" del que hablamos anteriormente. px no va a cambiar.

em es una "unidad relativa". El motor CSS calculará primero ese valor en una longitud de píxel. Después de calcular la longitud del píxel, enviará ese valor calculado al navegador. em, en particular, se calcula en función del tamaño de fuente relativo del elemento contenedor. El valor de em puede cambiar; Si cambia el tamaño de fuente de cualquier elemento padre, eso afectará el valor de em.

La mejor manera de pensar en em es pretender que el bit em no está allí y tratar el valor como un multiplicador. p.ej:

.foo {tamaño de fuente: 1.5em; / * confuso * / font-size: 1.5; / * No es válido, pero debería haberse hecho en lugar de llamarlo em * / line-height: 1.5; / * ¿ves cómo line-height acepta un multiplicador sin unidades? * /}

Entonces, la primera gran diferencia es que uno es absoluto, el otro es relativo.

px y em en la aplicación

Diferentes situaciones resaltarán las fortalezas y debilidades de cada unidad [4].

Debido a que px es una unidad de medida absoluta, tienes una alta previsibilidad de lo que obtienes en la pantalla. Pero no tienes proporcionalidad; las propiedades con tamaño en px no se vuelven a calcular si ajusta un tamaño de fuente en un elemento primario.

Entonces te encuentras mucho con esto:

body {font-size: 16px;} h1 {font-size: 32px; / * unidades absolutas para tamaño de fuente * / padding: 8px 16px; / * unidades absolutas para relleno * /} .foo {font-size: 12px; / * ajustar el tamaño de fuente en un padre * /} / * escribir un nuevo conjunto de reglas para mantener las cosas proporcionadas * / .foo h1 {font-size: 24px; / * reescribiendo una regla de fuente para que h1 2x sea normal * / padding: 6px 12px; / * reescritura para 1 / 4th y 1/2 * /}

Dado que em es una unidad relativa basada en el tamaño de fuente heredado, podría tener una baja previsibilidad de lo que está obteniendo en la pantalla, especialmente en equipos grandes. Pero tendrás una alta proporcionalidad; las propiedades dimensionadas en em se volverán a calcular si ajusta un tamaño de fuente en un elemento primario.

body {font-size: 16px;} h1 {font-size: 2em; / * unidad relativa * / relleno: .25em .5em; / * unidades relativas para el relleno * /} .foo {font-size: .75em; }

Así que has guardado la escritura de un conjunto de reglas completo al usar em. El tamaño de fuente calculado a 24px, y el relleno calculado a 6px 12px.

Entonces, la gran diferencia es la capacidad de tener el tamaño de las cosas proporcionalmente, ¡sin escribir más código!

Notas al pie

[1] Sintaxis y tipos de datos básicos

[2] Módulo de valores y unidades CSS Nivel 3

[3] ¿Cómo son "em" "px" y "%" diferentes entre sí en CSS?

[4] Los sitios web receptivos tienen que ver con cómo mides (en tu CSS)


Respuesta 2:

px es píxeles. Puede ser ligeramente diferente en diferentes navegadores, pero es probable que sea coherente dentro del mismo entorno y en un sitio en un navegador / dispositivo determinado. px tiene sentido para cosas como el ancho de línea y borde.

em es el mismo que el tamaño de fuente del elemento actual (que generalmente se hereda). Entonces, a medida que cambia el tamaño de la fuente, el valor de em también cambia. Esto es útil cuando desea espaciar algo en relación con el tamaño actual del texto. También es útil porque es relativo a otro contenido, por lo que es más probable que funcione en todas las pantallas. em es particularmente útil para configurar el espaciado, los márgenes y el relleno alrededor del texto.

rem es root em. Es igual que em, pero en lugar de ser relativo al tamaño de fuente actual, es relativo al tamaño de fuente del documento original. Esto significa que rem seguirá siendo coherente en una página, independientemente de la fuente actual. En muchas situaciones, es más fácil trabajar con rem porque es más predecible. En particular, tiene sentido para los márgenes que deben permanecer consistentes en un documento incluso cuando los tamaños de fuente locales cambian entre los elementos.

Generalmente, em y rem son más fáciles de mantener en una página, y el consenso general actualmente es usar em y rem en lugar de px. El consenso general no siempre es correcto, pero es un buen camino a seguir a menos que tenga una buena razón para hacer otra cosa.


Respuesta 3:

px es píxeles. Puede ser ligeramente diferente en diferentes navegadores, pero es probable que sea coherente dentro del mismo entorno y en un sitio en un navegador / dispositivo determinado. px tiene sentido para cosas como el ancho de línea y borde.

em es el mismo que el tamaño de fuente del elemento actual (que generalmente se hereda). Entonces, a medida que cambia el tamaño de la fuente, el valor de em también cambia. Esto es útil cuando desea espaciar algo en relación con el tamaño actual del texto. También es útil porque es relativo a otro contenido, por lo que es más probable que funcione en todas las pantallas. em es particularmente útil para configurar el espaciado, los márgenes y el relleno alrededor del texto.

rem es root em. Es igual que em, pero en lugar de ser relativo al tamaño de fuente actual, es relativo al tamaño de fuente del documento original. Esto significa que rem seguirá siendo coherente en una página, independientemente de la fuente actual. En muchas situaciones, es más fácil trabajar con rem porque es más predecible. En particular, tiene sentido para los márgenes que deben permanecer consistentes en un documento incluso cuando los tamaños de fuente locales cambian entre los elementos.

Generalmente, em y rem son más fáciles de mantener en una página, y el consenso general actualmente es usar em y rem en lugar de px. El consenso general no siempre es correcto, pero es un buen camino a seguir a menos que tenga una buena razón para hacer otra cosa.