Las unidades de medida en CSS nos ayudan a dimensionar los elementos de nuestra página web. En este post, te enseñamos cuáles son las unidades de medida en CSS que existen y cómo usarlas.
Unidades de medida absolutas
Las unidades de medida en CSS de tipo absoluto hacen referencia a las unidades que no cambian, esas que en todos lo contextos son iguales. En CSS, existen siete unidades de medida absolutas, te las presentamos a continuación:
- in: hace referencia a las pulgadas, que son iguales a 2.54cm.
- cm: se refiere a los centímetros.
- mm: hace referencia a los milímetros.
- q: se refiere a un cuarto de la unidad mm. 1q=0.248mm.
- pt: un punto es igual a 1/72 de una pulgada o 0.35mm.
- pc: una pica es igual a 12 puntos, o sea 4.23mm.
- px: esta etiqueta se refiere a los píxeles que, aunque son absolutos (0.26mm), también son relativos a la densidad de la pantalla.
Unidades de medida relativas
Las unidades de medida en CSS de tipo relativo dependen del elemento o factor al que hagan referencia. Aunque pueden ser inicialmente más complejas, algunos prefieren las unidades de medidas de css relativas porque los tamaños de los elementos dependen el uno del otro. Esto hace que las proporciones entre los elementos se mantengan y todo encaje.
em
Esta unidad es relativa al tamaño de letra o font size establecida en el navegador. Su nombre es em porque el tamaño de letra se basa en el tamaño de la letra eme. A menos que haya sido modificada por el usuario, normalmente este tamaño es de 16px.
ex
Esta unidad es relativa a la altura de la «x» del elemento. También se conoce por ser más o menos la mitad del tamaño de la fuente del navegador o 0.5em.
ch
Conocido en inglés como zero width, esta unidad de medida es relativa al tamaño del ancho del cero en la fuente del navegador.
%
Esta unidad es relativa al tamaño del elemento padre.
rem
La unidad rem o root em es similar a la unidad em, pero, en vez de tomar como base el tamaño de letra del navegador, la unidad em toma el tamaño base del documento HTML. Este tamaño se personaliza bajo la etiqueta :root {font-size}. De este modo, podemos usar rem para dimensionar nuestros elementos con un múltiplo del tamaño base.
Esta unidad puede ser muy útil a la hora de dimensionar una página cuando el usuario hace zoom, pues los elementos serán relativos unos a otros y mantendrán su proporción. Esta es una unidad de medida comúnmente utilizada para el tamaño de fuente en css
Unidades del viewport
Las siguientes unidades son relativas al viewport, que es el espacio o trozo de pantalla donde se renderiza y se muestra la página web. Estas unidades sirven para dimensionar la pantalla y organizar los elementos dentro de esta.
vw
Como sigla de la unidad en inglés viewport width, esta unidad es relativa al ancho del viewport.
vh
Como sigla de la unidad en inglés viewport height, esta unidad es relativa a la altura del viewport.
vmin
Esta unidad vmin css , también conocida como viewport minimum, es relativa al factor que sea más pequeño entre el ancho y al alto del viewport.
vmax
Esta unidad, conocida como viewport maximum, es relativa al factor que sea más grande entre el ancho y el alto del viewport. Junto con vmin, esta unidad puede ser muy útil si queremos que nuestros diseños sean flexibles y se adapten al tamaño visible de la página web.
¿Qué sigue?
Si quieres revisar los conocimientos obtenidos en este post, te invitamos a leer el artículo de la MDN sobre unidades de medida, en donde encontrarás ejercicios que te ayudarán a revisar cómo funciona cada unidad.
Ahora que conoces las principales unidades de medida en CSS, ¡es momento de ponerlas en práctica! Por eso te invitamos a nuestro Desarrollo Web Full Stack Bootcamp. Allí, entre muchas otras herramientas y lenguajes, aprenderás cómo usar CSS para diseñar tu página web y practicarás las unidades de medida que hemos visto aquí. ¡Apúntate ahora!
