Unidades de Medición
CSS3 nos permite expresar los tamaños y medidas en distintas unidades de medición, algunas de ellas de tipo relativo y otras de tipo absoluto. En cualquier caso, la unidad de medición debe expresarse siempre a continuación del valor numérico sin espacios en blanco. Por ejemplo: 10px, 3%, 1.4rem, ... Únicamente para el valor numérico 0 se permite omitir la unidad de medición.
Unidades Absolutas
Son unidades de tamaño fijo que no dependen de nada más, muy prácticas si se conoce el medio o la resolución exacta de salida. Se desaconseja en general su uso en diseños responsivos pues al ser fijas no se "adaptan" correctamente.
px: Nos permite expresar una medición en píxeles.
cm: Nos permite expresar una medición en centímetros.
in: Nos permite expresar una medición en pulgadas (1in = 96px = 2.54cm).
pt: Nos permite expresar una medición en puntos (1pt = 1/72 in).
Unidades Relativas
Son unidades cuyo valor es relativo al valor de otra propiedad de referencia. Su uso es esencial para garantizar un diseño responsivo.
%: Nos permite expresar un porcentaje de tamaño relativo respecto del elemento padre.
em: Nos permite expresar un tamaño relativo al tamaño de la fuente del elemento actual.
rem: Nos permite expresar un tamaño relativo al tamaño de la fuente del elemento
<html>.vw: Nos permite expresar un tamaño relativo al 1% del ancho del viewport.
vh: Nos permite expresar un tamaño relativo al 1% del alto del viewport.
vmin: Nos permite expresar un tamaño relativo al 1% del mínimo valor del viewport: 1vw o 1vh.
vmax: Nos permite expresar un tamaño relativo al 1% del máximo valor del viewport: 1vw o 1vh.
Última actualización
¿Te fue útil?