Escuché que deberías definir tamaños y distancias en tu hoja de estilo con em en lugar de en píxeles. Entonces, la pregunta es ¿por qué debería usar em en lugar de px al definir estilos en css? ¿Hay un buen ejemplo que ilustra esto?

Es incorrecto decir que uno es una mejor opción que el otro (o que a ambos no se les hubiera dado su propio propósito en la especificación). Incluso vale la pena señalar que StackOverflow hace un uso extensivo de las unidades px. No es la mala elección que le dijeron a Spoike.

Definición de unidades

• px es una unidad de medida absoluta (como in , pt o cm ) que también resulta ser 1/96 de una unidad in (más sobre por qué más adelante). Debido a que es una medida absoluta, puede usarse en cualquier momento que desee definir que algo tenga un tamaño particular, en lugar de ser proporcional a algo más, como el tamaño de la ventana del navegador o el tamaño de fuente.

  Como todas las demás unidades absolutas, las unidades px no se escalan de acuerdo con el ancho de la ventana del navegador. Por lo tanto, si el diseño de toda su página usa unidades absolutas como px en lugar de % , no se adaptará al ancho del navegador. Esto no es inherentemente bueno o malo, solo una elección que el diseñador debe hacer entre adherirse a un tamaño exacto y ser inflexible versus estirar, pero en el proceso no adherirse a un tamaño exacto. Sería típico que un sitio tuviera una mezcla de objetos de tamaño fijo y de tamaño flexible.

  Los elementos de tamaño fijo a menudo deben incorporarse a la página, como pancartas publicitarias, logotipos o iconos. Esto garantiza que casi siempre necesite al menos algunas mediciones basadas en px en un diseño. Las imágenes, por ejemplo, (por defecto) se escalarán de modo que cada píxel tenga un tamaño de 1 * px *, por lo que si está diseñando alrededor de una imagen necesitará unidades px . También es muy útil para un tamaño de fuente preciso y para anchos de borde, donde debido al redondeo tiene más sentido usar unidades px para la mayoría de las pantallas.

  Todas las medidas absolutas están rígidamente relacionadas entre sí; es decir, 1 pulgada es siempre 96 píxeles , así como 1 pulgada siempre es 72 puntos . (Tenga en cuenta que 1 pulgada casi nunca es realmente una pulgada física cuando se habla de medios basados ​​en pantalla). Todas las mediciones absolutas suponen una resolución de pantalla nominal de 96ppi y una distancia de visualización nominal de un monitor de escritorio, y en dicha pantalla un px será igual a un píxel físico en la pantalla y uno enserá igual a 96 píxeles físicos. En pantallas que difieren significativamente en la densidad de píxeles o en la distancia de visualización, o si el usuario ha ampliado la página con la función de zoom del navegador, px ya no necesariamente se relacionará con los píxeles físicos.

• em no es una unidad absoluta, es una unidad relativa al tamaño de fuente elegido actualmente. A menos que haya anulado el estilo de fuente configurando su tamaño de fuente con una unidad absoluta (como px o pt ), esto se verá afectado por la elección de las fuentes en el navegador o el sistema operativo del usuario si lo han hecho, por lo que no tiene sentido para usar em como una unidad general de longitud, excepto donde específicamente desea que se escale a medida que se escala el tamaño de fuente.

  Utilice em cuando se desea específicamente el tamaño de algo que dependerá del tamaño de la fuente actual.

• % también es una unidad relativa, en este caso, relativa a la altura o al ancho de un elemento padre. Son una buena alternativa a las unidades px para cosas como el ancho total de un diseño si su diseño no se basa en tamaños de píxeles específicos para establecer su tamaño.

  El uso de % de unidades en su diseño permite que su diseño se adapte al ancho de la pantalla / dispositivo, mientras que el uso de una unidad absoluta como px no lo hace.

Tengo una computadora portátil pequeña con una alta resolución y tengo que ejecutar Firefox con un zoom de texto del 120% para poder leer sin entrecerrar los ojos.

Muchos sitios tienen problemas con esto. El diseño se vuelve totalmente confuso, el texto en los botones se corta por la mitad o desaparece por completo. Incluso stackoverflow.com lo padece:

Observe cómo se superponen los botones superiores y las pestañas de la página. Si hubieran usado unidades em en lugar de px, no habría habido un problema.

La razón por la que hice esta pregunta fue porque olvidé cómo usar los em, ya que hacía un tiempo estaba hackeando felizmente en CSS. La gente no se dio cuenta de que mantuve la pregunta general ya que no estaba hablando de dimensionar las fuentes per se. Estaba más interesado en cómo definir estilos en cualquier elemento de bloque dado en la página.

Como Henrik Paul y otros señalaron, em es proporcional al tamaño de fuente utilizado en el elemento. Es una práctica común definir tamaños en elementos de bloque en px, sin embargo, cambiar el tamaño de las fuentes en los navegadores generalmente rompe este diseño. El cambio de tamaño de las fuentes se realiza comúnmente con las teclas de acceso directo Ctrl+ +o Ctrl+ -. Entonces, una buena práctica es usar em's en su lugar.

Usando px para definir el ancho

Aquí hay un ejemplo ilustrativo. Supongamos que tenemos una etiqueta div que queremos convertir en un elegante cuadro de fecha, es posible que tengamos un código HTML similar al siguiente:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Una implementación simple definiría el ancho de la date-boxclase en px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

El problema

Sin embargo, si queremos dimensionar el texto en nuestro navegador, el diseño se romperá. El texto también sangrará fuera del cuadro, que es casi lo mismo que sucede con el diseño de SO como señala flodin . Esto se debe a que el cuadro seguirá teniendo el mismo tamaño de ancho que el que está bloqueado 50px.

Usando em en su lugar

Una forma más inteligente es definir el ancho en ems:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

De esta forma, tiene un diseño fluido en el cuadro de fecha, es decir, el cuadro se ajustará junto con el texto en proporción al tamaño de fuente definido para el cuadro de fecha. En este ejemplo, el tamaño de fuente se define *como 10pt y aumentará 2.5 veces hasta ese tamaño de fuente. Entonces, cuando esté dimensionando las fuentes en el navegador, el cuadro tendrá 2.5 veces el tamaño de ese tamaño de fuente.

La respuesta más votada aquí de thomasrutter es correcta en su respuesta sobre el em . Pero está muy, muy mal acerca del tamaño de un píxel. Entonces, a pesar de que es viejo, no puedo dejar que se debata.

¡La pantalla de una computadora normalmente NO es de 96 ppp! (O ppi, si quieres ser pedante).

Un píxel NO tiene un tamaño físico fijo.
(Sí, se arregla solo en una pantalla, pero en la siguiente pantalla un píxel es más grande o más pequeño, y ciertamente NO ES 1/96 de pulgada).


Prueba
Dibuje una línea de 960 píxeles de largo. Mídelo con una regla física. ¿Son 10 pulgadas? No..?
Conecte su computadora portátil a su televisor. ¿La línea mide 10 pulgadas ahora? ¿Todavía no?
Muestra la línea en tu iPhone. ¿Sigue siendo del mismo tamaño? Por qué no?

¿Quién diablos inventó el mito de la pantalla de la computadora de 96 ppp?
(Algunas religiones operan con un mito de 72 ppp. Pero igualmente equivocado).

Es útil para todo lo que tiene que escalar de acuerdo con el tamaño de fuente.

Es especialmente útil en los navegadores que implementan zoom al escalar el tamaño de fuente. Entonces, si dimensiona todos sus elementos usando, emse escalan en consecuencia.

Porque el em ( http://en.wikipedia.org/wiki/Em_(typography) ) es directamente proporcional al tamaño de fuente actualmente en uso. Si el tamaño de la fuente es, digamos, 16 puntos, un em es de 16 puntos. Si el tamaño de la fuente es de 16 píxeles ( nota : no es lo mismo que los puntos), un em es de 16 píxeles.

Esto lleva a dos cosas (relacionadas):

1. es fácil mantener proporciones, si elige editar los tamaños de fuente en su CSS más adelante.
2. Muchos navegadores admiten tamaños de fuente personalizados, anulando su CSS. Si diseña todo en píxeles, su diseño podría romperse en estos casos. Pero, si usa ems, estas anulaciones deberían mitigar estos problemas.

ejemplo:

Código: body {font-size: 10px;} // mantener en 10 todos los tamaños por debajo de los correctos, cambiar este valor y el resto cambia para ser, por ejemplo, 1.4 de este valor

1 {font-size: 1.2em;} // 12px

2 {font-size: 1.4em;} // 14px

3 {font-size: 1.6em;} // 16px

4 {font-size: 1.8em;} // 18px

5 {font-size: 2em;} // 20px

...

cuerpo

1

2

3

4 4

5 5

Al cambiar el valor en el cuerpo, el resto cambia automáticamente para ser un tipo de veces el valor base ...

10 × 2 = 20 10 × 1.6 = 16, etc.

podría tener el valor base como 8px ... entonces 8 × 2 = 16 8 × 1.6 = 12.8 // puede ser redondeado por el navegador

Una razón muy práctica es que IE 6 no le permite cambiar el tamaño de la fuente si se especifica usando px, mientras que lo hace si usa una unidad relativa como em o porcentajes. No permitir que el usuario cambie el tamaño de la fuente es muy malo para la accesibilidad. Aunque está en declive, todavía hay muchos usuarios de IE 6.

use px para la colocación precisa de elementos gráficos. utilícelos para mediciones que tengan que posicionarse y espaciarse alrededor de elementos de texto como altura de línea, etc. px tiene una precisión de píxeles, em puede cambiar dinámicamente con la fuente en uso

La razón principal para usar em o porcentajes es permitir que el usuario cambie el tamaño del texto sin romper el diseño. Si diseña con fuentes especificadas en px, no cambian de tamaño (en IE 6 y otras) si el usuario elige el tamaño del texto, más grande . Esto es muy malo para los usuarios con discapacidades visuales.

Para ver varios ejemplos y artículos sobre diseños como este (hay una infinidad de opciones para elegir), vea el último número de A List Apart: Fluid Grids , el artículo anterior Cómo ajustar el tamaño del texto en CSS o el Diseño web a prueba de balas de Dan Cederholm .

Sus imágenes aún deben mostrarse con tamaños de px, pero, en general, no se considera una buena forma de dimensionar su texto con px.

Por mucho que desprecie personalmente a IE6, actualmente es el único navegador aprobado para la mayoría de los usuarios de nuestra compañía Fortune 200.

Hay una solución simple si desea utilizar px para especificar el tamaño de fuente, pero aún desea la usabilidad que proporcionan los em al colocar esto en su archivo CSS:

body {
  font-size: 62.5%;
}

Ahora especifique usted p(y otras) etiquetas como esta:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

Y así.

Probablemente quiera usar em para tamaños de fuente hasta que IE6 desaparezca (de su sitio). Px estará bien cuando el zoom de página (a diferencia del zoom de texto) se convierta en el comportamiento estándar.

Traingamer ya proporcionó los enlaces necesarios .

Pixel es una unidad absoluta, mientras que rem / em son unidades relativas. Para más información: https://drafts.csswg.org/css-values-3/

Debe usar la unidad relativa cuando desee que el tamaño de fuente sea adaptable de acuerdo con el tamaño de fuente del sistema porque el sistema proporciona el valor de tamaño de fuente al elemento raíz que es el elemento HTML.

En este caso, cuando la página web está abierta en Google Chrome, el tamaño de fuente del elemento HTML está establecido por Chrome, intente cambiarlo para ver el efecto en las páginas web con fuentes de unidades rem / em.

Si lo usa pxcomo unidad para las fuentes, las fuentes no cambiarán de tamaño, mientras que las fuentes con rem/ emunit cambiarán de tamaño cuando cambie el tamaño de fuente del sistema.

Entonces use pxcuando quiera que el tamaño sea fijo y use rem/ emcuando quiera que el tamaño sea adaptable / dinámico al tamaño del sistema.

El consenso general es usar porcentajes para el tamaño de fuente, porque es más consistente en todos los navegadores / plataformas.

Sin embargo, es divertido, siempre solía usar pt para el tamaño de fuente y asumí que todos los sitios lo usaban. Normalmente no usa tamaños px en otras aplicaciones (por ejemplo, Word). Supongo que es porque son para imprimir, pero el tamaño es el mismo en un navegador web que en Word ...

Evite em o px use rem en su lugar porque es más fácil encontrar el valor calculado. Pero entre em y px, px es mejor porque em es difícil de depurar.