Las unidades de CSS más comunes que debes estar usando

Normalmente de unidades no se habla mucho. Al final y al cabo solo es algo que se pone como valor de un atributo de CSS y ya.

Sin embargo vale la pena no obviar el hecho de que hay muchas más unidades disponibles en CSS aparte de nuestro siempre confiable pixel (px).

Principalmente hay 2 tipos de unidades:

Unidades absolutas
Unidades relativas

La diferencia es simple. Las unidades absolutas son aquellas que definen el tamaño que abarca un elemento en específico. Las unidades relativas son aquellas que definen el tamaño de un elemento en relación a algún otro.

*Un buen ejemplo de unidad absoluta son los píxeles (px).

El porcentaje (%)

Una unidad relativa. El uso del porcentaje no necesita mucha explicación. Al definirlo, el valor asociado se representa como la parte porcentual del valor heredado del padre.

index.html

    <body>
        <div class="box">
            <div class="child-box"></div>
        </div>
    </body>

styles.css

.box {
    position: relative;
    background-color: rosybrown;
    width: 400px;
    height: 300px;
}

.child-box {
    background-color: seashell;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 75%;
    height: 75%;
}

El elemento con clase child-box toma el valor del 75% del width y height respectivo del elemento padre. Es decir de un 300px y 225px.

viewport height (vh) y viewport width (vw)

Otras unidades relativas. Son las unidades viewport (de ventana gráfica) y representan la altura y el ancho. Sus valores representan el porcentaje que se cubre de la ventana gráfica.

¿Porcentaje? ¿Qué no es lo mismo entonces usar la unidad %? ¿En qué son diferentes vw y vh?

Bueno de hecho lo acabamos de decir. El porcentaje hereda el valor de referencia del elemento padre. Mientras que vh y vw lo heredan del bloque inicial.

index.html

    <body>
        <div class="box">
            <div class="child-box"></div>
        </div>
    </body>

styles.css

.box {
    position: relative;
    background-color: rosybrown;
    width: 25vw;
    height: 30vh;
}

.child-box {
    background-color: seashell;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 10vw;
    height: 15vh;
}

El valor de vh y vw varía dependiendo del tamaño del monitor/pantalla en el que estés haciendo la prueba. No solo eso, también depende del tamaño de la ventana. Así que te gusta hacer que la ventana ocupe la mitad de tu pantalla o si estás utilizando las herramientas de desarrollador terminarás afectando estos valores.

Por lo tanto no tiene mucho caso que te diga a cuánto equivale cada conversión de width y height. Sin embargo puedes verlo como que tienen estas equivalencias:

.box width = ancho de la ventana * 0.25
.box height = alto de la ventana * 0.3
.child-box width = ancho de la ventana * 0.1
.child-box height = alto de la ventana * 0.15

em y rem

em y rem también son unidades relativas. Esto quiere decir que su valor se define en relación a otro.

1 em equivale al valor que tiene la propiedad de font-size del primer ancestro que tenga la propiedad de font-size definida.

1 rem es más simple. Equivale al valor que tiene la propiedad de font-size del elemento raíz del documento. Es decir del elemento html.

Ambas unidades son extremadamente útiles ya que sirven para mantener la responsividad en los tamaños y espacios.

index.html

    <body>
        <div class="box">
            <h1>Header</h1>
            <p class="first">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p class="second">Voluptatum, numquam.</p>
        </div>
    </body>

styles.css

.box {
    background-color: rosybrown;
    font-size: 4em;
}


h1 {
    font-size: 1em;
}


.first {
    font-size: 0.75em;
}

.second {
    font-size: 0.75rem;
}

Veamos a que equivale cada valor em y rem que definimos:

El valor base por defecto de font-size es de 16px y se aplica al elemento raíz html. html a su vez lo hereda a body.

.box font-size: 4em = 4*16px = 64px
- 16px es el valor del primer ancestro con un font-size definido: html

h1 font-size: 1em = 1*64px = 64px
- 64px es el valor del primer ancestro con un font-size definido: box

.first font-size: 0.75em = 0.75*64px = 48px
- 64px es el valor del primer ancestro con un font-size definido: box

.second font-size: 0.75rem = 0.75*16px = 12px
- 16px es el valor del font-size del elemento raíz.

*Para ver un ejemplo más a profundidad puedes leer —Las unidades de CSS: rem y em—

Y con eso ya aprendiste las unidades más usadas y fundamentales de CSS. Hay muchas otras pero difícilmente las verás en el día y a día. Con estas pocas unidades ya puedes hacer diseños responsivos y de alta calidad.