CSS | Medidas relativas
em | Relativa al tamaño de la fuente del elemento padre
La unidad em es escalable y siempre depende de su elemento padre. En este ejemplo, el elemento contenedor tiene un tamaño de fuente de 10px y un elemento hijo tiene una fuente con tamaño 2em, este texto se mostrará con un tamaño de 20px.
font-size: 10px;
Párrafo hijo del contenedor: font-size: 2em;
rem | Root em | Relativa al tamaño de la fuente del elemento raíz
La unidad rem es escalable y siempre depende de su elemento raíz o root (html ). En este ejemplo, el elemento hijo tiene una fuente con tamaño 1.5rem. Como el tamaño de la fuente del elemento html es de 16px, este texto se mostrará con un tamaño de 24px.
Párrafo hijo del contenedor: font-size: 1.5rem;
ex | Relativa al tamaño de la altura de la letra 'x' del elemento padre
La unidad ex es escalable y siempre depende de su elemento padre. En este ejemplo, el elemento contenedor tiene un tamaño de fuente de 20px y un elemento hijo tiene una fuente con tamaño 1ex, este texto se mostrará con un tamaño de equivalente a la altura de la letra 'x' del elemento padre.
font-size: 20px;
Párrafo hijo del contenedor: font-size: 1ex;
ch | Relativa al tamaño del ancho (avance) del glifo '0' del elemento padre
La unidad ch es escalable y siempre depende de su elemento padre. En este ejemplo hay un elemento padre y un hijo que tiene una fuente con tamaño de fuente 1ch, este texto se mostrará con un tamaño de equivalente a la anchura del glifo '0' del padre.
font-size: 20px;
Párrafo hijo del contenedor: font-size: 1ch;
lh | Relativa al tamaño de la altura de línea del propio elemento
La unidad lh es escalable y depende del propio elemento. El elemento tiene un tamaño de línea de 100px. La altura y anchura del elemento es de 1lh y debería adoptar esos mismos 100px. El problema es que lh es una unidad de medida no soportada por la mayoría de navegadores.
line-height: 100px; width: 1lh; height: 1lh;
vw | % del ancho de la ventana gráfica
La unidad vw depende de la anchura de la ventana gráfica. En el ejemplo, el elemento tiene una anchura equivapente a la mitad de la ventana gráfica.
width: 50vw;vh | % de la altura de la ventana gráfica
La unidad vh depende de la altura de la ventana gráfica. En el ejemplo, el elemento tiene una anchura equivapente al 10% de la ventana gráfica.
height: 10vh;vmin | % de la dimensión más pequeña de la ventana gráfica
La unidad vmin depende del tamaño de la ventana gráfica. En el ejemplo, el elemento tiene una anchura equivapente al 50% de la dimensión más pequeña de la ventana gráfica.
width: 50vmin;vmax | % de la dimensión más grande de la ventana gráfica
La unidad vmax depende del tamaño de la ventana gráfica. En el ejemplo, el elemento tiene una anchura equivapente al 50% de la dimensión más grande de la ventana gráfica.
width: 50vmax;% | Unidad porcentual relativa al elemento padre
La unidad % es escalable y siempre depende de su elemento padre. En este ejemplo, el elemento contenedor tiene una anchura de 300px y un elemento hijo tiene una anchura del 50%, esto equivale a 150px.
width: 300px;
Párrafo hijo del contenedor:width: 50%;