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 para el diseño receptivo. preferidas 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 . Entonces, profundicemos en cada unidad. tutsplus.com 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. { : ; } { : ; : blueviolet; } { : ; } { : ; } html font-size 20px .boxes font-size 24px background-color .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. { : ; } { : ; : (70, 43, 226); } { : ; } { : ; } html font-size 20px .boxes font-size 24px background-color rgb .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. { : ; : burlywood; } { : ; : dotted yellow; } { : ; } body width 100% background-color .boxes width 80% border 1px 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. { : ; : burlywood; } { : ; : dotted yellow; } { : ; } body width 100vw background-color .boxes width 20vw border 1px 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. { : burlywood; } { : ; : dotted yellow; } { : ; } body background-color .boxes height 20vh border 1px img height 50vh 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. Conclusión