Hola, ¿podrían decirme qué significa vw como unidad de medida de pantalla?
También tengo dudas sobre em y rem, no las entiendo bien, ¿me podrían aclarar estos conceptos de unidades de medida, por favor?
Hola, ¿podrían decirme qué significa vw como unidad de medida de pantalla?
También tengo dudas sobre em y rem, no las entiendo bien, ¿me podrían aclarar estos conceptos de unidades de medida, por favor?
Hola Silvia,
Con respecto a tu duda te explico lo siguiente:
vw (Viewport Width): La unidad vw representa el porcentaje del ancho del viewport (ventana visible del navegador). Un viewport del 100% se refiere al ancho total de la ventana visible del navegador. Por lo tanto, si estableces un elemento con un ancho de 100vw, ocupará todo el ancho del viewport, independientemente del tamaño de la pantalla.
Ejemplo:
"El codigo css se escribe asi:"
div { width: 50vw; /* El div ocupará el 50% del ancho del viewport */ }
em: La unidad em representa el tamaño relativo con respecto al tamaño de la fuente del elemento padre. Si no se establece un tamaño de fuente en el elemento actual, se heredará el tamaño de fuente del elemento padre más cercano. Si estableces el tamaño de fuente de un elemento a 1em, será igual al tamaño de fuente del elemento padre. Si el tamaño de fuente del elemento padre es de 16px, entonces 1em será igual a 16px.
Ejemplo:
"El codigo css se escribe asi:"
body { font-size: 16px; /* El tamaño de fuente base del body es 16px */ }
p { font-size: 1.2em; /* El tamaño de fuente de este párrafo será 1.2 * 16px = 19.2px */ }
rem (Root em): La unidad rem también representa un tamaño relativo, pero a diferencia de em, siempre se basa en el tamaño de fuente del elemento raíz (generalmente, el tamaño de fuente definido en el elemento
). Esto significa que el tamaño de fuente en rem no depende del tamaño de fuente de los elementos padres, lo que puede hacer que el cálculo de tamaños sea más sencillo y predecible.Ejemplo:
El codigo cssse escribe asi:
html { font-size: 16px; /* Tamaño de fuente base para todo el documento */ }
p { font-size: 1.5rem; /* El tamaño de fuente de este párrafo será 1.5 * 16px = 24px */ }
En resumen:
En resumen:
vw representa un porcentaje del ancho del viewport. em representa un tamaño relativo con respecto al tamaño de fuente del elemento padre. rem representa un tamaño relativo con respecto al tamaño de fuente del elemento raíz (
).La elección de la unidad de medida dependerá del contexto y de cómo desees que los elementos se ajusten en relación con el tamaño de la pantalla y los elementos circundantes. Cada unidad tiene sus ventajas y se utiliza en diferentes situaciones.
Espero sea de utilidad la explicacion.