La mejor unidad de CSS para un diseño receptivo

Las unidades de CSS son muy importantes al crear un sitio web receptivo y es posible que se pregunte cuál usar considerando que tenemos varias unidades de CSS. Tuve el mismo problema mientras trabajaba en un proyecto, así que investigué un poco al respecto. En este artículo, te mostraré las unidades CSS más adecuadas para usar en un diseño receptivo.

Unidades CSS

Hay dos tipos de Unidades CSS que son:

• Unidad de longitud absoluta
• Unidad de longitud relativa

Unidad de longitud absoluta

La unidad de longitud absoluta es una unidad fija en todos los dispositivos y puede variar en diferentes resoluciones de pantalla porque dependen de los DPI (puntos por pulgada) de cada pantalla. Estas unidades incluyen:

• px - Píxel
• pt - Punto
• pc - Picas
• en - pulgadas
• cm - centímetro
• mm - milímetro

píxel

De las unidades enumeradas anteriormente, escribiré sobre la unidad de píxel CSS, ya que es una medida de uso común en el diseño del diseño de un sitio web. Aunque el píxel cae dentro de la unidad de longitud absoluta, es relativo al dispositivo de visualización y tiene un efecto constante en varios tamaños de pantalla. El píxel CSS es bueno cuando se establece un borde, ya que queremos que permanezca igual en diferentes tamaños de pantalla, a diferencia de los tamaños de fuente.

Unidad de longitud relativa

La unidad de longitud relativa no tiene tamaños fijos, son relativos a algo, podría ser el tamaño de fuente de un elemento principal o el tamaño de una ventana gráfica. Prefiero estas unidades ya que se ajustan a diferentes tamaños de pantalla. Incluyen :

• em - Relativo al tamaño de fuente del elemento
• ex - Relativo a la altura x de la fuente actual
• % - Relativo al elemento principal
• ch - Relativo al ancho de cero
• rem - Relativo al elemento raíz
• vw: el ancho de la ventana gráfica es relativo al 1% del ancho de la ventana gráfica (ventana del navegador)
• vh: la altura de la ventana gráfica es relativa al 1 % de la altura de la ventana gráfica (ventana del navegador)
• vmin: el mínimo de la ventana gráfica es relativo al 1% de la ventana gráfica (ventana del navegador) para una dimensión más pequeña
• vmax: el máximo de la ventana gráfica es relativo al 1% de la ventana gráfica (ventana del navegador) para una dimensión más grande

Escribiré sobre las siguientes unidades relativas, Rem, Em, Porcentaje (%), Ancho de vista (vw) y Altura de vista, ya que son las preferidas para el diseño receptivo.

Además, se usan más comúnmente a diferencia de otras unidades relativas que tienen soporte de navegador limitado, pero puede obtener una explicación detallada sobre otras unidades relativas en tutsplus.com . Entonces, profundicemos en cada unidad.

Movimiento rápido del ojo

Rem es una unidad absoluta relativa al elemento raíz del documento HTML y se usa comúnmente para tamaños de fuente. Es una unidad escalable en la que el navegador se convierte en valores de píxeles. Lo recomiendo por capacidad de respuesta. El tamaño de fuente predeterminado del elemento raíz es 16px.

Si establecemos el tamaño de fuente de un elemento en 1 rem, se representará como 1 rem, lo que equivale a 16 px. El marco CSS como Bootstrap 4 usa las unidades rem, esto se debe a que es relativo al elemento raíz, también conocido como etiqueta HTML y escala a través de todos los dispositivos. Aquí hay un ejemplo usando la unidad rem.

 html { font-size : 20px ; } .boxes { font-size : 24px ; background-color : blueviolet; } .box h1 { font-size : 2rem ; } .box p { font-size : 1rem ; }

em

Em también es una unidad absoluta, pero a diferencia de la unidad rem, es relativa al elemento padre inmediato. También se puede usar para tamaños de fuente, pero puede generar resultados inesperados porque es relativo al padre inmediato. Por ejemplo, si el tamaño de fuente de un div es 16px, entonces 1em del elemento secundario será 16pixel y 2em será 32pixel. Esto puede dar muchos tamaños de fuente diferentes que pueden afectar el diseño del sitio web. Los recomiendo principalmente para margen y relleno debido a los problemas que puede encontrar con los tamaños de fuente. Aquí hay un ejemplo de la unidad em.

 html { font-size : 20px ; } .boxes { font-size : 24px ; background-color : rgb (70, 43, 226); } .box h1 { font-size : 2em ; } .box p { font-size : 1em ; }

Porcentaje(%)

La unidad de porcentaje también es relativa al elemento principal y se usa comúnmente como el ancho y alto de un elemento. Aunque no existe una regla fija sobre dónde usar esta unidad, rara vez se usa para tamaños de fuente. La unidad de porcentaje también es útil al crear un diseño receptivo.

 body { width : 100% ; background-color : burlywood; } .boxes { width : 80% ; border : 1px dotted yellow; } img { width : 50% ; }

Ancho de ventana gráfica (vw)

Esta unidad es relativa al 1% del ancho de la ventana gráfica (ventana del navegador). Lo que esto significa es que la unidad vw se ajustará de acuerdo con las diferentes ventanas del navegador. La diferencia entre porcentaje (%) y vw es como la diferencia que encontramos entre rem y em. La unidad de porcentaje es relativa al elemento contenedor, mientras que vw es relativa a la ventana gráfica, que es la ventana del navegador. Aquí hay un ejemplo de unidad vw.

 body { width : 100vw ; background-color : burlywood; } .boxes { width : 20vw ; border : 1px dotted yellow; } img { width : 100vw ; }

Altura de la ventana gráfica (vh)

La altura de la ventana gráfica es relativa al 1% de la altura de la ventana gráfica (ventana del navegador). Un 5vh conducirá al 5% de la altura actual de la ventana gráfica. Esta unidad funciona igual que la vw pero con la altura de una ventana gráfica, es útil cuando se crea un sitio web receptivo. Aquí hay un ejemplo de una unidad vh.

 body { background-color : burlywood; } .boxes { height : 20vh ; border : 1px dotted yellow; } img { height : 50vh ; }

Conclusión

En conclusión, no existe exactamente una regla fija sobre qué unidad CSS usar al diseñar el diseño de un sitio web, pero para crear un sitio web receptivo que se adapte a diferentes tamaños de pantalla, recomendaré usar unidades relativas, pero si desea un tamaño fijo para pantalla diferente tamaños, entonces usar píxeles CSS es útil.