CSS3: Unidades de ventana gráfica: nuevas unidades para diseños receptivos

Desarrollar diseños web que se ajusten al ancho o, si es necesario, al alto de una ventana del navegador es fácil con valores basados ​​en porcentajes. Probablemente hará esto a diario, optimizando su sitio web para tabletas y teléfonos inteligentes. No importa el elemento, bloques de texto, imágenes, todo se ajusta al tamaño dado.

Pero el uso de valores basados ​​en porcentajes no siempre es la mejor manera de definir los tamaños en relación con la ventana del navegador. Piense en los tamaños de fuente. No se puede definir un tamaño de fuente para que reaccione a un ancho cambiante de la ventana del navegador, al menos no basado en porcentajes. CSS3 introduce nuevas unidades que abordan explícitamente este problema.

Unidades de ventana gráfica para definiciones de tamaño más flexibles

Las unidades «vw» y «vh“defina un ancho/alto relativo al tamaño de la ventana. Usamos «vw» por «view width» y «vh» por «view height“. Estas llamadas unidades de ventana gráfica nos permiten definir tamaños en relación con el tamaño reciente de la ventana del navegador.

div {
  width: 50vw;
  height: 100vh;
}

Nuestro elemento de ejemplo ocupará el 50% del ancho de la ventana y el 100% de la altura de la ventana. Mientras que los valores basados ​​en porcentajes siempre se relacionan con su elemento principal, las unidades de ventana gráfica siempre se relacionan con el tamaño de la ventana. Incluso es posible definir alturas en relación con el ancho y viceversa.

div {
  height: 50vw;
}

Nuestro ejemplo define la altura del elemento como el 50% del ancho de la ventana. Reducir el ancho de la ventana altera la altura del elemento.

El tamaño de fuente universal se ajusta debido a las unidades de ventana gráfica

Si desea asegurar una tipografía decente, querrá asegurarse de que las fuentes se muestren en tamaños aceptables, sin importar el dispositivo en el que se muestren. Es necesario cuidar especialmente los titulares grandes para evitar que se vean horribles. Use unidades de ventana gráfica para definir su fuente en relación con el ancho de la ventana del navegador.

h1 {
  font-size: 10vw;
}

Nuestro ejemplo define el tamaño de la fuente como el 10% del ancho de la ventana. Gracias a «vw“, el tamaño de fuente, define para „h1“ ahora siempre se ajustará a la ventana del navegador.

Definir tamaños según la relación de aspecto

Para agregar a las unidades „vw» y «vh“, tenemos las unidades „vmin» y «vmax«.Con «vmin“ definimos un tamaño en relación con la altura de la ventana o en relación con el ancho de la ventana, dependiendo de qué valor sea menor. I s el ancho menor que la altura, „vmin“ se relacionará con el ancho. Puedes imaginar lo que „vmax» lo hace. Sí, lo mismo, solo en relación con el valor más alto.

div {
  width: 2vmin;
}

En este ejemplo, nuestro elemento recibirá un ancho del 20 % del ancho de la ventana, mientras que el ancho de la ventana es menor que la altura. Si la altura es menor que el ancho, el elemento se definirá como el 20% de la altura de la ventana. Es fácil, una vez que juegas un poco con él.

Compatibilidad con navegador

No lo creerá, pero las unidades de ventana gráfica son compatibles con todos los principales navegadores. Incluso Internet Explorer puede funcionar correctamente con ellos, al menos desde la versión 10 en adelante. Firefox agregó soporte desde la versión 19, Chrome desde la versión 20.

(dpe)