¿Por qué em en lugar de px?

Escuché que debes definir los tamaños y las 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 para definir estilos en css? ¿Hay un buen ejemplo que ilustre esto?

Es incorrecto decir que una es una mejor opción que la otra (o que a ambas no se les hubiera dado su propio propósito en la especificación). Incluso puede valer la pena señalar que StackOverflow hace un uso extenso de las unidades de 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 (más sobre por qué más adelante). Debido a que es una medición absoluta, se puede usar cada vez que desee definir algo para que sea de un tamaño particular, en lugar de ser proporcional a otra cosa como el tamaño de la ventana del navegador o el tamaño de la fuente.

    Al igual que todas las otras unidades absolutas, las unidades de px no se escalan de acuerdo con el ancho de la ventana del navegador. Por lo tanto, si el diseño de toda la página utiliza unidades absolutas, como px en lugar de % , no se adaptará al ancho del navegador. Esto no es intrínsecamente bueno o malo, solo una elección que el diseñador debe hacer entre adherirse a un tamaño exacto y ser inflexible versus estiramiento, pero en el proceso no se adhiere a un tamaño exacto. Sería típico que un sitio tuviera una combinación 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 banners publicitarios, logotipos o íconos. Esto garantiza que casi siempre necesite al menos algunas medidas basadas en px en un diseño. Las imágenes, por ejemplo, se escalarán (de forma predeterminada) de modo que cada píxel tenga un tamaño de 1 * px *, por lo que si diseña alrededor de una imagen necesitará px unidades. También es muy útil para el tamaño preciso de las fonts y para el ancho de los bordes, donde debido al redondeo tiene más sentido usar unidades de px para la mayoría de las pantallas.

    Todas las mediciones absolutas están rígidamente relacionadas entre sí; es decir, 1in es siempre 96px , al igual que 1in es siempre 72pt . (Tenga en cuenta que 1in 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 en será igual a 96 píxeles físicos. En las pantallas que difieren significativamente en la densidad de píxeles o la distancia de visualización, o si el usuario ha acercado la página con la función de zoom del navegador, px ya no se relacionará necesariamente con los píxeles físicos.

  • em no es una unidad absoluta: es una unidad que es relativa al tamaño de fuente elegido actualmente. A menos que haya reemplazado el estilo de fuente al configurar el tamaño de fuente con una unidad absoluta (como px o pt ), esto se verá afectado por la elección de fonts en el navegador o 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 la fuente.

    Use em cuando desee específicamente que el tamaño de algo dependa del tamaño de fuente actual.

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

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

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

Muchos sitios tienen problemas con esto. El diseño se confunde, el texto de los botones se reduce a la mitad o desaparece por completo. Incluso stackoverflow.com sufre de esto:

Captura de pantalla de Firefox con un 120% de zoom de texto

Observe cómo los botones superiores y las tabs de la página se superponen. 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 que olvidé cómo usar em’s, ya que era un momento en el que estaba pirateando felizmente en CSS. La gente no se dio cuenta de que mantenía la pregunta general ya que no estaba hablando sobre el tamaño de las fonts 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, el tamaño de las fonts en los navegadores generalmente rompe este diseño. El tamaño de las fonts se suele hacer con las teclas de método abreviado 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. Digamos que tenemos una etiqueta div que queremos convertir en un cuadro de fecha con estilo, podemos tener un código HTML que se ve así:

July

4

Una implementación simple definiría el ancho de la clase date-box 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 ajustar el tamaño del texto en nuestro navegador, el diseño se romperá. El texto también sangrará fuera de la caja, que es casi lo mismo que sucede con el diseño de SO, como señala Flodin . Esto se debe a que la caja permanecerá del mismo tamaño en ancho ya que está bloqueada a 50px .

Usando em en su lugar

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

 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, tendrá un diseño fluido en el cuadro de fecha, es decir, la casilla 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 en * como 10 puntos y boostá 2.5 veces el tamaño de la fuente. Por lo tanto, cuando evalúe las fonts en el navegador, la caja tendrá 2,5 veces el tamaño de ese tamaño de fuente.

La respuesta más votado aquí de thomasrutter es correcta en su respuesta sobre el em . Pero está muy muy mal sobre el tamaño de un píxel. Así que, aunque es viejo, no puedo dejar que no se acabe.

¡Una pantalla de computadora normalmente NO es de 96dpi! (O ppi, si quieres ser pedante)

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

Prueba
Dibuja una línea, 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 es de 10 pulgadas ahora? ¿Todavía no?
Muestra la línea en tu iPhone. ¿Todavía del mismo tamaño? Por qué no?

¿Quién diablos inventó el mito de la pantalla de la computadora 96dpi?
(Algunas religiones operan con un mito de 72 dpi, pero igualmente incorrecto).

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

Es especialmente útil en los navegadores que implementan el zoom escalando el tamaño de la fuente. Entonces, si dimensionas todos tus elementos usando em se 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, por ejemplo, 16 puntos, uno em es 16 puntos. Si el tamaño de su 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 las 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 omisiones deberían mitigar estos problemas.

ejemplo:

Código: body {font-size: 10px;} // mantener en 10 todos los tamaños por debajo de la correcta, cambie este valor y el rest cambie 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

5

al cambiar el valor en el cuerpo, el rest cambia automáticamente para ser una especie de veces el valor base …

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

podrías 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 utilizando px, mientras que sí 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. Úselo para mediciones que tienen que hacer posicionamiento y espaciado alrededor de elementos de texto como altura de línea, etc. px es píxel exacto, em puede cambiar dinámicamente con la fuente en uso

La razón principal para usar em o porcentajes es permitir al usuario cambiar el tamaño del texto sin romper el diseño. Si diseña con fonts especificadas en px, no cambian el tamaño (en IE 6 y otros) 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 gran variedad para elegir), consulte el último número de A List Apart: Fluid Grids , el artículo anterior How to Size Text in CSS o Dan Cederholm’s Bulletproof Web Design .

Sus imágenes aún se deben mostrar con los tamaños de px, pero, en general, no se considera buena forma de ajustar el tamaño del texto con px.

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

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

 body { font-size: 62.5%; } 

Ahora especifique su p (y otras) tags 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í.

Por lo que vale, esta es la definición de las diferentes unidades en CSS: http://www.w3.org/TR/css3-values/#lengths .

Probablemente desee utilizar em para tamaños de fuente hasta que IE6 se haya ido (de su sitio). Px estará bien cuando el zoom de página (a diferencia del zoom de texto) se convierte en el comportamiento estándar.

Traingamer ya proporcionó los enlaces necesarios .

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

Aunque 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 de px en otras aplicaciones (por ejemplo, Word). Supongo que es porque están para imprimir, pero el tamaño es el mismo en un navegador web que en Word …