css - tamaños - ¿Cuál es la diferencia entre px, em y ex?

rem vs px (5)

¿Cuál es la diferencia entre px , em y ex ? Y cuando defines el tamaño de fuente en CSS, ¿usas px , pt o em ?

¿cuál es la diferencia px, em y ex?

http://www.w3.org/TR/CSS21/syndata.html#length-units describe esas y las otras unidades de longitud disponibles en CSS

Y cuando se define el tamaño de letra en css, ¿uso px, pt o em?

Como regla general, use porcentajes en la pantalla y pt para imprimir.

em : el font-size de letra de la fuente relevante
ex : la x-height de la fuente relevante
px : píxeles, en relación con el dispositivo de visualización

Los píxeles ( px ) dependen del navegador. Es el tamaño absoluto que verías en tu pantalla.
Em son una especie de porcentajes. Em s se refiere al tamaño de texto base. El valor de 1 em significa lo mismo que un valor de 100 percent . Pero también puedes decirlo de la manera opuesta: un valor porcentual es solo un em multiplicado por 100.
Los puntos ( pt ) son los que desearía usar en los medios impresos.

Unidades de longitud CSS:

Absoluto : pulgadas ( in ), centímetro ( cm ), milímetro ( mm ), puntos ( pt ), picas ( pc )

Los puntos son mediciones tipográficas estándar que han sido utilizadas por impresores y tipógrafos durante décadas y por programas de procesamiento de textos durante muchos años. Tradicionalmente, hay 72 puntos por pulgada (los puntos se definieron antes del uso generalizado del sistema métrico). Por lo tanto, las letras mayúsculas del texto establecido en 12 puntos deben tener una altura de un sexto de pulgada. Por ejemplo, p {font-size: 18pt;} es equivalente a p {font-size: 0.25in;}.

Picas es otro término tipográfico. Una pica equivale a 12 puntos, lo que significa que hay 6 picas por pulgada. Como se acaba de mostrar, las letras mayúsculas del texto establecido en 1 pica deben medir un sexto de pulgada. Por ejemplo, p {font-size: 1.5pc;} establecería texto con el mismo tamaño que las declaraciones de ejemplo encontradas en la definición de puntos.

Estas unidades son realmente útiles solo si el navegador conoce todos los detalles del monitor en el que se muestra su página, la impresora que está utilizando o cualquier otro agente de usuario que aplique. En un navegador web, la visualización se ve afectada por el tamaño del monitor y la resolución a la que se encuentra el monitor, y no hay mucho que usted, como el autor, pueda hacer con respecto a estos factores. Las unidades absolutas son mucho más útiles en la definición de hojas de estilo para documentos impresos , donde medir cosas en términos de pulgadas, puntos y picas es común. Como ha visto, intentar utilizar mediciones absolutas en el diseño web es, en el mejor de los casos, peligroso.

Relativo : em (em-height), ex (e-height), px . Los dos primeros representan y "x-height", que son mediciones tipográficas comunes; sin embargo, en CSS, tienen significados que no podrías esperar si estás familiarizado con la tipografía.

em : uno "em" se define como el valor del tamaño de fuente para una fuente determinada. Si el tamaño de letra de un elemento es 14 píxeles, entonces para ese elemento, 1em equivale a 14 píxeles.

ex : se refiere a la altura de una x minúscula en la fuente que se usa. Por lo tanto, si tiene dos párrafos en los que el texto tiene 24 puntos, pero cada párrafo usa una fuente diferente, entonces el valor de ex podría ser diferente para cada párrafo. Esto se debe a que diferentes fuentes tienen diferentes alturas para x

px : pequeñas cajas de color en un monitor son píxeles. En general, si declara algo como font-size: 18px , un navegador web casi seguro usará píxeles reales en su monitor, ya están allí, pero con otros dispositivos de visualización, como impresoras, el agente de usuario tendrá que volver a escalar longitud de píxeles a algo más sensible . En otras palabras, el código de impresión tiene que determinar cuántos puntos hay en un píxel, y para hacerlo, puede usar el píxel de referencia de 96ppi.

Concluir

Debido a este potencial de cambio de escala, los píxeles se definen como una unidad de medida relativa, aunque, en el diseño web, se comportan de manera similar a las unidades absolutas.

Rrefrence: css la guía definitiva de eric meyer

em : el em es una unidad escalable que se utiliza en medios de documentos web. Un em es igual al tamaño de letra actual, por ejemplo, si el tamaño de fuente del documento es 12pt , 1em equivale a 12pt .

px : Los píxeles son unidades de tamaño fijo que se utilizan en los medios de pantalla (es decir, para leer en la pantalla de la computadora). Un píxel equivale a un punto en la pantalla de la computadora (la división más pequeña de la resolución de su pantalla).

pt : Los puntos se usan tradicionalmente en los medios impresos (todo lo que se va a imprimir en papel, etc.). Un punto es igual a 1/72 de pulgada. Los puntos se parecen mucho a los píxeles, ya que son unidades de tamaño fijo y no pueden escalar en tamaño.