Cómo elegir la mejor unidad de CSS para crear mejores diseños de sitios

Las unidades de CSS son uno de los aspectos más fundamentales a considerar al crear un diseño de sitio. Estas unidades definirán cómo interactuará su diseño en varios dispositivos.

Pero cuando se trata de unidades CSS, hay muchas opciones para elegir y no todas las opciones son iguales. Las unidades CSS no se limitan solo a las fuentes, por lo que, como desarrollador front-end, también debe comprender cómo estas unidades afectan los diseños.

En este artículo, le mostraré cómo funcionan las diferentes unidades de CSS, para que pueda usarlas para crear mejores diseños y diseños de sitios.

Tipos de unidades CSS

Las unidades CSS se pueden separar en las siguientes categorías:

• Unidades absolutas
• Unidades relativas de fuente
• Unidades relativas de ventana gráfica

Unidades absolutas

Algunas unidades dependen de ciertos valores absolutos y no se ven afectadas por ningún tamaño de pantalla o fuente. Estas unidades de visualización pueden variar según las diferentes resoluciones de pantalla, ya que dependen de los DPI (puntos por pulgada) de las pantallas.

Estas unidades son:

• px (píxeles)
• en pulgadas)
• cm (centímetro)
• mm (milímetro)
• pc
• pt (puntos)

Píxeles

Los píxeles son la unidad más utilizada y aceptada. Y se considera la base de medida de muchas otras unidades. Proporciona el resultado más consistente entre varios dispositivos.

El elemento de box en el siguiente ejemplo tiene una altura de 150 px y un ancho de 150 px, y seguirá siendo el mismo en todos los tamaños de pantalla.

.box{
height:150px;
width:150px;
}

Todas las demás unidades absolutas como en (pulgadas), cm (centímetro) y mm (milímetro) son unidades de medida del mundo real con muy pocos casos de uso de CSS del mundo real.

Sin embargo, aún es bueno entender su relación con los píxeles, así es como se comparan:

• 1 pulgada = 96 px
• 1 cm = 37,8 píxeles
• 1 mm = 3,78 píxeles

Mientras que pc (picas) y pt (puntos) están directamente relacionados con las pulgadas.

• 1 pulgada = 72 puntos
• 1 pulgada = 6 piezas

La relación entre todas las unidades absolutas se puede demostrar así:

Movimiento rápido del ojo

Aparte de los píxeles, todas las demás unidades absolutas tienen muy pocos o ningún caso de uso para CSS de pantalla, pero dado que son unidades de medida del mundo real, se pueden usar de manera efectiva en CSS de impresión. (En caso de que se esté preguntando acerca de los píxeles, ¡también funcionan bien en CSS de impresión!)

Unidades relativas de fuente

Hay algunas unidades que dependen del tamaño de la fuente o de la familia de fuentes del documento o de sus elementos de nivel principal. Esto incluye unidades como:

• ellos
• movimiento rápido del ojo
• ex
• ch

em

Em es una unidad de longitud relativa; depende del tamaño de fuente del elemento principal o del documento. Por defecto, 1em es igual a 16px si no se define font-size .

Em hereda el tamaño del tamaño de fuente de su padre inmediato. Digamos, si un elemento principal tiene font-size:18px , entonces 1em se medirá como 18px para todos sus elementos secundarios.

Aquí tenemos un div .post con tres hijos, .post-item , con un título y algo de texto.

<div class="post">
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
</div>

Ahora el .post .post div tiene un font-size:20px font-size:1.2em padding:0.75em elemento margin:0.75em . *1,2em*0,75em).

html{
font-size:20px;
}

.post{
font-size:20px;
}

.post div{
font-size:1.2em;
}

.post-item{
background:pink;
padding:0.75em;
margin:0.75em;
}

.post-item h2{
font-size:1.5em;
margin:0.5em 0;
}

.post-item p{
margin:0;
font-size: 1em;
}

Como puede ver, los elementos secundarios heredan valores del elemento principal.

La ventaja de usar em es que, si decide cambiar el font-size , el padding y el margin de cada elemento proporcionalmente, solo tiene que cambiar el tamaño de fuente del elemento principal y todos los demás elementos se ajustarán en consecuencia.

Ese no será el caso con unidades absolutas como px, donde tienes que ajustar cada elemento individualmente.

Sin embargo, esta naturaleza de herencia puede ser un poco difícil de administrar si los elementos anidados también tienen su propio font-size en em.

Al igual que en la demostración anterior, si envuelve el título y el párrafo dentro de otro div en uno de los elementos secundarios, verá resultados extraños.

<div class="post-item">
<div>
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  	</div>
</div>

Debido post-item tiene un div anidado, el tamaño base cambiará de 24 px a 28,8 px (20 px * 1,2 em * 1,2 em), y font-size y el margin para h2 cambiarán a 43,2 px (20 px * 1,2 em * 1,2 em) *1,5em) y 14,4px (20px*1,2em*1,2em*0,5em), respectivamente.

Movimiento rápido del ojo

Rem puede ser realmente útil en este tipo de situaciones porque siempre se refieren al tamaño de fuente del elemento raíz, no al elemento principal.

Si toma el ejemplo anterior y cambia las unidades de em a rem para .post div , verá que todos los elementos secundarios se corrigen solos.

.post div{
  font-size:1.2rem;
}

Una vez que la unidad se cambia de em a rem, su base cambia de div principal a elemento raíz, que tiene un front-size:20px .

Por lo tanto, el cálculo será 20px*1.2rem*value y h2 y p tendrán un font-size y un margin consistentes, independientemente de su padre.

Ex

Ex es relativo a la altura x de la fuente actual y se usa muy raramente. La medida de la altura x no es consistente; a veces proviene de la propia fuente y, a veces, el navegador lo calcula solo.

Al igual que em y rem, depende de la fuente, pero la principal diferencia es que ex cambiará cuando cambie también la font-family , lo que no es el caso con los otros dos.

.box{
width:150ex;
height:150ex;
}

Ch

Ch es similar a ex pero no depende de la altura de x; más bien en el ancho del carácter cero (0). También cambia con font-family .

.box{
width:150ch;
height:150ch;
}

Unidades relativas de ventana gráfica

Hay algunas unidades que dependen del tamaño de la altura y el ancho de la ventana gráfica, como:

• vh (altura de la ventana gráfica)
• vw (ancho de la ventana gráfica)
• vmin (mínimo de ventana gráfica)
• vmax (máximo de ventana gráfica)

Vh

Vh (altura de la ventana gráfica) se mide como 1vh igual al 1% de la altura de la ventana gráfica. Esta unidad es muy útil para crear elementos de altura completa. Vh reacciona de manera similar al porcentaje, pero no depende de la altura del elemento principal.

Puede usar vh en cualquier lugar, pero el caso de uso más común de vh es para hacer elementos de altura completa. En este ejemplo, la clase full-height creará un contenedor azul que tendrá el 100 % de la altura de la ventana gráfica.

.full-height{
height:100vh;
background:blue;
}

volkswagen

Vw (ancho de la ventana gráfica) es similar a vh pero considera el ancho, en lugar de la altura de la ventana gráfica. 1vw es igual al 1% del ancho de la ventana gráfica. Estas unidades pueden ser realmente útiles si desea crear una ventana gráfica receptiva basada en tipografía.

En este ejemplo, el tamaño de font-siz de h1 es el 6 % del ancho de la ventana gráfica, por lo que si el ancho de la ventana gráfica es de 1000 píxeles, el tamaño de la fuente será de 60 píxeles, y si la ventana gráfica es de 500 píxeles, el tamaño de la fuente será de 30 píxeles.

h1{
font-size:6vw;
}

Vmin

Vmin se calcula sobre la base del valor mínimo del ancho o alto de la ventana gráfica, el que sea menor. Digamos que tiene un tamaño de ventana gráfica de 1000 px de alto por 800 px de ancho. 1vmin será igual a 8px.

Vmax

Vmax se calcula exactamente al contrario de vmin , donde se considera el valor máximo de la ventana gráfica.

Al igual que el ejemplo anterior de ventana gráfica con 1000 px de alto por 800 px de ancho, 1vmax será igual a 10 px.

Ahora exploremos cómo puede usar vmin y vmax de manera efectiva. Usando nuestro ejemplo anterior, digamos que queremos tener un relleno y un margen fluidos basados ​​en el tamaño de la ventana gráfica ahora, en lugar de un valor fijo.

En este fragmento de código, configuré el relleno en 3vmax y el margen en 1.5vmin .

.post-item{
background pink;
padding:3vmax;
margin:1.5vmin;
}

El relleno y el margen cambiarán según el tamaño de la ventana gráfica.

Unidad de porcentaje (%)

La unidad de porcentaje (%) no pertenece a ninguna categoría en particular mencionada anteriormente, pero se puede categorizar como una unidad relativa. Es relativo a su elemento padre.

El porcentaje se asocia principalmente con la altura y el ancho de un elemento, pero se puede usar en cualquier lugar donde se permitan unidades de longitud CSS.

El porcentaje es una de las unidades más útiles para crear un diseño receptivo o fluido. Los marcos populares como Bootstrap, Foundation y Bulma usan el porcentaje para su diseño base.

Aquí, la clase full-width tendrá el 100% del ancho de su elemento principal.

.full-width{
width: 100%;
}

Conclusión

He cubierto casi todas las unidades de CSS disponibles para su uso. Dependiendo de sus objetivos, algunos serán más adecuados que otros. “Como desarrollador front-end, siempre es bueno conocer sus opciones porque nunca sabe cuál podría necesitar en su próximo proyecto. ”

Entonces, ¿qué unidades usa con más frecuencia para obtener el resultado deseado? ¡Házmelo saber en la sección de comentarios a continuación!