html - units - vh css w3schools

¿Cómo funciona la unidad vw y vh?

Question

Cómo funciona la unidad VW y VH. Quiero saber cómo calcular el valor de esta unidad. Estoy diseñando un sitio web y uso 2vw y funciona perfectamente para mi texto. Sin embargo, solo hice una conjetura para poner este valor. Por favor dígame cómo funciona, por lo que será mejor para mí usarlo en el futuro y es un navegador cruzado.

Answer 1

vw y vh son un porcentaje del ancho y alto de la ventana, respectivamente: 100vw es 100% del ancho, 80vw es 80%, etc.

Para calcular el valor en píxeles, simplemente harías algo como

vwToPx = function(vwValue) {
    return $(window).outerWidth()/100*vwValue;
}

Una cosa que debes tener en cuenta es que el Safari móvil todavía muestra vh incorrectamente, y todo lo que no sea el navegador más reciente de Android no puede manejar ninguna de las unidades. Ver caniuse .

Para obtener más información, puede consultar este artículo en csstricks.com.