¿Por qué em en lugar de px?

Question

He oído que debes definir los tamaños y las distancias en tu hoja de estilos 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 ilustre esto?

Answer 1

La razón por la que hice esta pregunta fue porque olvidé cómo usar los em, ya que 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 que em es proporcional a El 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 + - . Así que una buena práctica es usar em's en su lugar.

Uso de 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 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 dimensionar el texto en nuestro navegador, el diseño se romperá. El texto también sangrará fuera de la caja, que es casi lo mismo que ocurre con el diseño de SO que Flodin señala. Esto se debe a que el cuadro tendrá el mismo tamaño de ancho que está bloqueado en 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 esa manera tiene un diseño fluido en el cuadro de fecha, es decir, el cuadro se ajustará al tamaño del 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 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.

Answer 2

Es incorrecto decir que uno es mejor opción que el otro (o ambos no habrían tenido su propio propósito en la especificación). Incluso puede valer 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 que era.

Definición de unidades

• px es una unidad de medida absoluta (como en , pt o cm ) también sucede que es 1/96 de una unidad en (más sobre por qué más adelante). Debido a que es una medida absoluta, se puede usar en cualquier momento que desee definir algo para que tenga 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.

  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 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 es una elección que el diseñador debe hacer entre adherirse a un tamaño exacto y ser inflexible frente al estiramiento, pero en el proceso no se adhiere a un tamaño exacto. Sería típico que un sitio tuviera una mezcla de objetos de tamaño fijo y tamaño flexible.

  Los elementos de tamaño fijo a menudo deben incorporarse a la página, como anuncios publicitarios, 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, se escalarán (por defecto) de manera que cada píxel tenga un tamaño de 1 * px *, por lo que si está diseñando alrededor de una imagen, necesitará las unidades px . También es muy útil para el 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, 1in es siempre 96px , al igual que 1in es siempre 72pt . (Tenga en cuenta que 1in casi nunca es realmente una pulgada cuando se habla de medios basados ??en pantalla). Todas las medidas absolutas asumen 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 físico en el la pantalla y una en serán iguales 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 ampliado 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 relativa al tamaño de fuente elegido actualmente. A menos que haya reemplazado el estilo de fuente al configurar 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 del usuario o el sistema operativo, si han hecho uno, por lo que no tiene sentido usar em como una unidad general de longitud, excepto donde usted desea específicamente que se amplíe a medida que se amplía 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.

• % también es una unidad relativa, en este caso, relativa a la altura o el 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 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.

Answer 3

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

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

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

Answer 4

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

¡Una pantalla de 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í, está arreglado solo en la pantalla uno , pero en la siguiente pantalla es muy probable que un píxel sea más grande o más pequeño, y ciertamente NO de 1/96 de pulgada).


Prueba
Dibuja una línea, 960 píxeles de largo. Mídelo con una regla física. ¿Es de 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 de 96 ppp?
(Algunas religiones operan con un mito de 72 ppp. Pero igualmente equivocadas).

Answer 5

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

Es especialmente útil en los navegadores que implementan el zoom al escalar el tamaño de la fuente. Así que si dimensionas todos tus elementos con em , se escalarán en consecuencia.

Answer 6

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 fuente es, digamos, 16 puntos, uno em es 16 puntos. Si el tamaño de la fuente es de 16 píxeles ( nota : no es lo mismo que los puntos), uno es de 16 píxeles.

Esto conduce a dos cosas (relacionadas):

1. es fácil mantener proporciones, si decides editar los tamaños de fuente en tu 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 deben mitigar estos problemas.

Answer 7

ejemplo:

Código: body {font-size: 10px;} // mantener en 10 todos los tamaños a continuación correctos, cambie este valor y el resto cambiará, 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

& # 8230;

cuerpo

1

2

3

4

5

cambiando el valor en cuerpo, el resto cambia automáticamente para ser una especie de veces el valor base & # 8230;

10 & # 215; 2 = 20 10 & # 215; 1.6 = 16 etc.

podría tener el valor base como 8px & # 8230; asi que 8 & # 215; 2 = 16 8 & # 215; 1.6 = 12.8 // se pueden redondear con el navegador

Answer 8

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 por ahí.

Answer 9

utilice px para la colocación precisa de elementos gráficos. use em para mediciones que tienen que hacer posicionamiento y espaciado alrededor de elementos de texto como altura de línea, etc. px es un píxel preciso, em puede cambiar dinámicamente con la fuente en uso

Answer 10

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 otros) si el usuario elige tamaño de 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 miles de opciones para elegir), consulte 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 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 para ajustar el tamaño de su texto con px.

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

Answer 11

Hay una solución simple si desea utilizar px para especificar el tamaño de fuente, pero aún así desea la facilidad de uso que proporcionan los ems colocando esto en su archivo CSS:

body {
  font-size: 62.5%;
}

Ahora especifique que 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í sucesivamente.

Answer 12

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

Traingamer ya proporcionó los enlaces necesarios .

Answer 13

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

Aunque es gracioso, siempre solía usar pt para el tamaño de fuente y asumí que todos los sitios usaban eso. Normalmente no usas tamaños de 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 ...