Unidades Relativas (CSS)

Last updated Jul 20, 2023 Edit Source

• Programming
• Frontend
• Css

Aquí se da un abreve explicación de lo que son las unidades relativas en CSS, al contrastarlas con las unidades absolutas podemos ver como se diferencian.

Relative units of measurement describe property values that directly depend on the values of the same properties for the parent element.

Uno de estos tipos de valores que dependen del elemento padre es el tamaño de la letra, por tanto, estos pueden ser cambiados utilizando alguno de los operadores de las unidades relativas, los cuales son:

• %. La medida en porcentaje en base al elemento padre.
• em. La medida en base a el elemento padre, 1em equivale al 100% del elemento padre.
• rem. La medida en base al elemento raíz (HTML), 1rem equivale al 100% del elemento raíz.
• ex. La medida relativa a la altura de la misma medida del elemento padre. Por ejemplo, se cambia la letra en base a la altura de la letra del elemento padre.
• ch. La medida relativa al ancho del carácter ‘0’ del elemento padre. Muy útil cuando se busca imprimir cosas y que salgan de buen tamaño.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

pre {
	height: 80%;
	font-size: 2em;
}

p {
  font-size: 1rem;
}

b {
	font-size: 5ch;
}

Aquí se da una breve explicación de lo que es el viewport, en pocas palabras es la zona donde se muestra la pagina web. Ajustar sus valores garantiza que la pagina web se muestre correctamente en diferentes sitios.

The word “viewport” refers to the area of the web page that the user can see without having to scroll.

Las formas de cambiar el viewport es mediante unidades.

• vw. Se refiere al 1% del ancho total de la pagina web, por tanto, 100vw = 100% (default)
• vh. Se refiere al 1% del alto total de la pagina web, por tanto, 100vh = 100% (default)
• vmin. Se refiere al 1% de la dimension mas pequeña del viewport (altura o anchura). Usar 100vmin es igual a usar 100vx, donde x es la medida mas pequeña.
• vmax. Se refiere al 1% de la dimension mas grande del viewport. Usar 100vmax es igual a usar 100vx, donde x es la medida mas grande.

1
2
3
4
5
6
7
8
9

pre {
	width: 10vw;
	height: 24vh;
}

div {
	width: 20vmin;
	height: 40vmax;
}