Pregunta ¿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?


690
2018-03-04 07:08


origen


Respuestas:


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 en, pt, o cm) que también pasa a ser 1/96 de un en unidad (más sobre por qué más tarde). 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.

    Como todas las otras unidades absolutas, px las unidades 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 más bien que %, 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 asegura que casi siempre necesitas al menos algunos las mediciones basadas en px en un diseño. Las imágenes, por ejemplo, se escalarán de forma tal 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 fuentes y para el ancho de los bordes, donde debido al redondeo tiene más sentido usar px unidades para la mayoría de las pantallas.

    Todas las mediciones absolutas están rígidamente relacionadas entre sí; es decir, 1 en es siempre  96px, Tal como 1 en es siempre  72pt. (Tenga en cuenta que 1 en casi nunca es realmente un físico pulgada 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 dicha pantalla uno px será igual a uno físico píxel 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 acercado la página mediante 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 estableciendo el tamaño de fuente con una unidad absoluta (como pxo 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 usar em como una unidad general de longitud, excepto donde específicamente desea que se escale como el tamaño de fuente escamas.

    Utilizar em cuando desea 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 principal. Son una buena alternativa para px unidades para cosas 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.

    Utilizando % las unidades en su diseño permiten que su diseño se adapte al ancho de la pantalla / dispositivo, mientras que usan una unidad absoluta como px no.


498
2018-03-04 07:18



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:

Screenshot of Firefox at 120% text zoom

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 un problema.


132
2018-06-01 23:09



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 fuentes per se. Estaba más interesado en cómo definir estilos en cualquier elemento de bloque dado en la pagina.

Como Henrik Paul y otros señalaron que 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 fuentes en los navegadores generalmente rompe este diseño. Cambiar el tamaño de las fuentes 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í:

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

Una implementación simple definiría el ancho del date-box clase 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. Esto se debe a que la caja permanecerá del mismo tamaño en ancho ya que está bloqueada para 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 10pt y aumentará el tamaño 2.5 veces a ese tamaño de letra. Por lo tanto, cuando evalúe las fuentes en el navegador, la caja tendrá 2,5 veces el tamaño de ese tamaño de fuente.


85
2018-03-04 07:12



La respuesta más votado aquí desde 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á arreglado dentro de uno solo en la pantalla, pero en la siguiente pantalla un píxel probablemente sea 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).


59
2018-03-04 07:18



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 ellos escalan en consecuencia.


46
2018-04-18 05:51



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 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.

21
2018-03-04 07:30



ejemplo:

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


10
2018-03-04 07:13