Listado completo de tutoriales

31 - Unidades de medida (px, rem, em, cm, mm etc.)


Hasta ahora siempre que hemos especificado tamaños de letra, margin, padding, border etc. lo hemos hecho a través de pixeles o porcentaje. Esto debido a que la forma más sencilla de imaginar un tamaño, por lo menos para los que estamos trabajando todo el día en una computadora, es el tamaño de un pixel del monitor.
Veremos que hay varias unidades de medida para indicar tamaños y que algunas son más indicadas para algunas situaciones que otras.

Disponemos de las siguientes unidades de medida:

px (pixeles) 
rem (tamaño de la fuente respecto al elemento raíz del documento)
em (altura de la fuente por defecto)
ex (altura de la letra x minúscula) 
in (pulgadas) 
cm (centímetros) 
mm (milímetros) 
pt (puntos, 1 punto es lo mismo que 1/72 pulgadas) 
pc (picas, 1 pc es lo mismo que 12 puntos) 
% (porcentaje)

Unidades con longitudes relativas

De todas las medidas enunciadas en un principio las unidades con longitudes relativas más utilizadas son:

  1. rem
  2. em
  3. %

Las unidades de longitud relativa escalan mejor en celulares, tablets y monitores.

Por ejemplo el framework de CSS Bootstrap 4 utiliza en forma masiva la unidad de medida "rem", si abrimos su código fuente veremos que se inicializan más de 600 propiedades utilizando esta medida.

Veamos como se calculan las medidas de cada elemento cuando utilizamos la unidad "rem":

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <h1>Título nivel 1</h1>
  <h2>Título nivel 2</h2>
  <h3>Título nivel 3</h3>
  <h4>Título nivel 4</h4>
  <h5>Título nivel 5</h5>
  <h6>Título nivel 6</h6>  
</body>
</html>

estilos.css

html {
  font-size: 10px;
}
h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {	
  font-size: 1.25rem;
}

h6 {
  font-size: 1.05rem;
}

El resultado en el navegador:

rem

Para entender las medidas de los elementos h1, h2, h3 etc. debemos hacer la siguiente operación:
como el elemento "html" tiene una medida de 10px luego el elemento "h1" se calcula multiplicando 10px por 2.5 (es decir que los elementos h1 tienen una medida de 25px)

La medida definida en el elemento raiz que es "html" afecta a todos los elementos que utilizan la medida "rem".

Probemos de modificar la medida font-size del elemento "html" por el valor 20px y veremos que se ha afectado a todos los elementos que utilizan "rem":

rem

Podemos borrar la regla que definimos para el elemento "html":

html {
  font-size: 20px;
}

En dicho caso el navegador define un valor por defecto para la propiedad font-size y en pantalla tenemos la siguiente salida:

rem

Retornar