w3schools - css vh

¿Cuál es el valor de la unidad css ''ex''?

Question

(No debe confundirse con Xunit , una popular biblioteca de pruebas de la unidad .Net).

Hoy, en un ataque de aburrimiento, comencé a inspeccionar DOM de Gmail (sí, estaba muy aburrido).

Todo parecía bastante sencillo hasta que noté una especificación interesante sobre el ancho de ciertos elementos. Los ilustres googlitas habían especificado una serie de columnas usando la rara unidad ''ex''.

width: 22ex;

Al principio me quedé perplejo ("¿qué es un ''ex''?"), Luego volví a mí: me parece recordar algo de hace años cuando primero estaba aprendiendo sobre CSS. De la especificación CSS3 :

[La unidad ex ] es igual a la altura x utilizada de la primera fuente disponible . La altura x se llama así porque a menudo es igual a la altura de la "x" minúscula. Sin embargo, se define un ''ex'' incluso para las fuentes que no contienen una "x".

Bien y bueno. Pero nunca lo había visto antes (mucho menos lo usé yo mismo). Yo uso ems con bastante frecuencia, y aprecio su valor, pero ¿por qué el "ex"? Parece una medida mucho menos estándar que el em, y mucho menos útil.

Una de las pocas páginas que encontré sobre este tema es http://www.xs4all.nl/~sbpoley/webmatters/emex.html Stephen Poley. Stephen hace buenos comentarios, sin embargo, su discusión no parece concluyente para mí.

Entonces mi pregunta es: ¿qué valor le da la ''ex'' unidad al diseño web?

(Esta pregunta podría etiquetarse como subjetiva, pero dejaré esa decisión a SOs más experimentados que yo).

Answer 1

El valor de tenerlo en la especificación CSS, si eso es lo que realmente estás preguntando, es exactamente igual al valor de tener la unidad em.

Le permite establecer fuentes para tamaños relativos .

No sabes cuál es el tamaño de mi fuente base. Entonces, una buena estrategia para el diseño web es establecer tamaños de fuente que sean relativos, en lugar de absolutos; el equivalente a "duplicar su tamaño normal" o "un poco más pequeño que su tamaño normal" en lugar de un tamaño fijo como "diez píxeles".

Answer 2

Es útil cuando desea ajustar el tamaño de algo en relación con el alto de las letras minúsculas de su texto. Por ejemplo, imagine trabajar en un diseño como ese:

En la dimensión tipográfica del diseño, la altura de las letras tiene relaciones espaciales importantes con el resto de los elementos. Las líneas en la imagen de la fuente anterior están destinadas a ayudar a señalar el alto x del texto, pero también muestran dónde podrían estar las pautas si se diseña alrededor de ese texto.

Como señaló Jonathan en los comentarios, ex es simplemente la versión en altura de em (ancho).

Answer 3

Otra cosa a considerar aquí es cómo su página se escala cuando un usuario sube o baja el tamaño de su fuente (quizás usando ctrl + mouse wheel (windows)).

He usado em con .. padding-left: 2 em; relleno a la derecha: 2 em;

y ex con fondo acolchado: 2 ex; relleno superior: 2 ex;

Por lo tanto, se usa una unidad de medida vertical para una propiedad de escala vertical y una unidad de medida horizontal para una propiedad de escala horizontal.

Answer 4

Para responder a la pregunta, un uso es con superíndice y subíndice. Ejemplo:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Answer 5

Tenga en cuenta que los términos como "espaciado de línea simple / doble" significan realmente la compensación entre dos líneas adyacentes, medidas por em . Entonces, "espaciado de doble línea" significa que cada línea tiene una altura de 2 em .

Por lo tanto, si desea especificar una distancia vertical que sea proporcional a "líneas", use em. Solo use ex si quiere la altura real de la letra minúscula, que es, me atrevo a decir, una instancia mucho más rara.