Unidades de medida CSS VW, VH, PX, em y % en Divi explicado

En este tutorial vamos a conocer y veremos un ejemplo con las unidades de medida vw, vh, px, em y %. Explicaremos a detalle cada una de estas medidas y como usarlas para mejorar el diseño en móvil de nuestros sitios web hechos con Divi.

Índice

Tabla de Contenidos

Primero debemos entender que son las unidades de medida CSS implantadas a partir de la versión de CSS.

¿Qué son las unidades de Medida CSS?

Una unidad CSS determina el tamaño de una propiedad que está configurada para un elemento o su contenido. Por ejemplo, si quisiéramos establecer la propiedad margin de un párrafo, le debemos dar un valor específico. Este valor incluye la unidad CSS.

Veamos un ejemplo:

p {
  margin: 20px;
}

En este caso, margin es la propiedad, “20px;” es el valor y px (o “píxel”) es la unidad CSS. Aunque es común ver unidades como “px“, la gran pregunta es: “¿Cuál es la mejor unidad para usar en Divi?”

Conoce las últimas tendencias de diseño web en este articulo.

Antes de responder esta pregunta, debemos entender como funcionan cada una de estas unidades, comencemos:

Unidades CSS absolutas

Las unidades que son “absolutas” tienen el mismo tamaño independientemente del elemento principal o del tamaño de la ventana. Esto significa que un conjunto de propiedades con un valor que tiene una unidad absoluta tendrá ese tamaño cuando se mire en un teléfono o en un monitor grande (¡y todo lo demás!)

Las unidades absolutas pueden ser útiles cuando se trabaja en un proyecto en el que no se está considerando la capacidad de respuesta. Por ejemplo, las aplicaciones de escritorio que no se verán en dispositivos móviles, este tipo de unidades son bastante útiles.

Importante: las unidades absolutas pueden ser menos favorables para los sitios receptivos porque no se escalan cuando cambia el tamaño de la pantalla.

Dentro de estas unidades de medida aplican las siguientes:

cm un centímetro (se asigna a 37,8 píxeles)
mm un milímetro (0,1 cm)
q un cuarto de milímetro
in una pulgada (se asigna a 96 píxeles)
pt un punto (1 pulgada = 72 puntos)
pc una pica (1 pica = 12 puntos)
px 1px = 1/96 de 1 pulgada (96px = 1 pulgada).

Los píxeles (px) suelen ser la unidad absoluta más popular para las pantallas. Los centímetros, milímetros y pulgadas son más comunes para imprimir y es posible que ni siquiera supieras que eran opciones.

Pixeles

Es la unidad de medida más utilizada. Un píxel en realidad no se correlaciona con un píxel físico en tu pantalla, pero muchos expertos suelen estandarizar esta medida de la siguiente manera: 1px = 1/96 de 1 pulgada (96px = 1 pulgada).

Unidades CSS relativas

Las unidades CSS relativas son útiles para diseñar sitios sensibles porque se escalan en relación con el tamaño de la ventana principal (según la unidad).

Como regla general, las unidades relativas se pueden usar como predeterminadas para los sitios responsive. Esto puede ayudarte a evitar tener que actualizar estilos para diferentes tamaños de pantalla, eso si, son las unidades más difíciles de manejar, porque tendrás que hacer varias pruebas y ajustes hasta que todos tus elementos cuadren.

¿Quieres saber cuales son los 10 principios del diseño web minimalista? Lee nuestro artículo y mejora tus diseños al hacerlos “menos es más”

Las unidades relativas pueden ser un poco más difíciles que las unidades absolutas para determinar cuál usar, así que repasemos sus opciones en detalle:

em, rem, ex y ch

em es el valor asignado a ese elemento font-size, por lo tanto, su valor exacto cambia entre elementos. No cambia dependiendo de la fuente utilizada, solo del tamaño de la fuente. En tipografía, mide el ancho de la m letra.
rem es similar a em, pero en lugar de variar en el tamaño de fuente del elemento actual, usa el html tamaño de fuente del elemento raíz ( ). Establece ese tamaño de fuente una vez y rem será una medida constante en toda la página.
ex es como em, pero insertado de medir el ancho de m, mide la altura de la x letra. Puede cambiar según la fuente utilizada y el tamaño de la fuente.
ch es como ex pero en lugar de medir la altura x mide el ancho de 0 (cero).

Ejemplos:

.child {
  font-size: 0.5em;
}

.header {
  font-size: 2rem;
}

Unidades de ventana gráfica (viewport)

vw, vh, vmin y vmax

vw es la unidad de ancho de la ventana gráfica representa un porcentaje del ancho de la ventana gráfica. 50vw significa el 50% del ancho de la ventana gráfica.
vh es la unidad de altura de la ventana gráfica representa un porcentaje de la altura de la ventana gráfica. 50vh significa el 50% de la altura de la ventana gráfica.
vmin es la unidad mínima de la ventana gráfica representa el mínimo entre la altura o el ancho en términos de porcentaje. 30vmin es el 30% del ancho o alto actual, dependiendo de cuál sea más pequeño
vmax es la unidad máxima de la ventana gráfica representa el máximo entre la altura o el ancho en términos de porcentaje. 30vmax es el 30% del ancho o alto actual, dependiendo de cuál sea mayor

Ejemplos:

.wrapper {
  height: 100vh;
}

.half-size {
  width: 50vw;
}

.min-width {
  width: 100vmin;
}

.max-width {
  width: 100vmax;
}

Porcentajes (%)

Probablemente la unidad de medida más útil, los porcentajes te permiten especificar valores en porcentajes de la propiedad correspondiente de ese elemento principal que estás modificando y se ajustan en relación al entorno o la pantalla.

Ejemplo:

.parent {
  width: 400px;
}

.child {
  width: 50%; /* = 200px */
}

¡Aprende a manejar Divi de una manera profesional con nuestros tutoriales premium y cursos. Más de 600 contenidos premium disponibles!

Conclusiones

En general, cuándo y cómo elijas las unidades de CSS que quieras para tu sitio web se reducirá a un par de preguntas:

¿Quiero que lo que estoy diseñando se adapte cuando cambie el tamaño de la ventana gráfica (pantalla) en diferentes dispositivos?
Si quiero que se amplíe, ¿a qué quiero que se amplíe y en relación a qué quiero que se amplie?

Una vez que hayas respondido a estas preguntas, será mucho más fácil determinar qué unidad debes usar para mejorar tus diseños con Divi. 💪 Te recomendamos este post de Elegant Themes donde hablan más al respecto.

¡Si te ha gustado este contenido no olvides compartir!