css - unidades - ¿Por qué em en vez de px?

vh css

Question

Escuché que debería definir los tamaños y las distancias en su 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 ilustra esto?

Answer 1

El consenso general es usar porcentajes para el tamaño de la 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 ...

Answer 2

Es incorrecto decir que uno es una 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 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 in , pt o cm ) que también es 1/96 de una unidad in (más sobre por qué más adelante). Debido a que es una medida absoluta, se puede usar cada vez 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 fuente.

  Como todas las demás unidades absolutas, las unidades de px no se escalan según 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 en la página, como pancartas publicitarias, logotipos o iconos. Esto asegura que casi siempre necesite al menos algunas medidas basadas en px en un diseño. Las imágenes, por ejemplo, se escalarán (por defecto) 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 el tamaño de fuente preciso, y para anchos de borde, donde debido al redondeo tiene más sentido utilizar 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 , así como 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 medidas absolutas suponen una resolución de pantalla nominal de 96ppi y una distancia de visualización nominal de un monitor de escritorio, y en una pantalla de este tipo, 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 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 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 del usuario o sistema operativo si han creado una, por lo que no tiene sentido para utilizar em como una unidad general de longitud, excepto cuando desee 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 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 % 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.

Answer 3

Hay una solución simple si desea usar 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 especifica tus etiquetas p (y otras) 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í.

Answer 4

La razón por la que hice esta pregunta fue que olvidé cómo usar em''s, ya que era un tiempo que estaba hackeando alegremente en CSS. La gente no se dio cuenta de que mantuve la pregunta en general, ya que no estaba hablando sobre el tamaño de las fuentes en sí. 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, dimensionar 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.

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 parece a esto:

<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 de 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 flodin señala flodin . Esto se debe a que el cuadro seguirá teniendo el mismo tamaño de ancho ya que está bloqueado a 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 la fuente se define en * como 10 puntos y tendrá un tamaño de hasta 2,5 veces para ese tamaño de fuente. Entonces, cuando esté dimensionando las fuentes en el navegador, el cuadro tendrá 2.5 veces el tamaño de esa fuente.

Answer 5

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 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 miles de opciones para elegir), vea el último número de A List Apart: Fluid Grids , el artículo anterior Cómo dimensionar el 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 para dimensionar su texto con px.

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

Answer 6

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 quede sin debitar.

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í, se arregla solo en una 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. ¿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 7

Para lo que vale, aquí está la definición de las diferentes unidades en CSS: http://www.w3.org/TR/css3-values/#lengths .

Answer 8

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 su tamaño de fuente es de 16 píxeles ( nota : no es lo mismo que los puntos), uno 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 las fuentes 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 deben mitigar estos problemas.

Answer 9

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

Traingamer ya proporcionó los enlaces necesarios .

Answer 10

Tengo una pequeña computadora portátil con una alta resolución y tengo que ejecutar Firefox con un zoom de texto del 120% 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 .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 11

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 si 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 12

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 preciso en píxeles, em puede cambiar dinámicamente con la fuente en uso

Answer 13

ejemplo:

Código: cuerpo {font-size: 10px;} // mantener en 10 todos los tamaños a continuación correctos, cambiar este valor y el resto cambiará, por ejemplo, a 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 resto cambia automáticamente para ser una especie de veces el valor base ...

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

puede tener el valor base como 8px ... entonces 8 × 2 = 16 8 × 1.6 = 12.8 // puede redondearse por navegador

Answer 14

Es de uso 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 al escalar el tamaño de la fuente. Así que si dimensionas todos tus elementos usando em se escalan en consecuencia.