Guía para las unidades CSS Viewport vw, vh, vmin, vmax

Longitud de las vistas en porcentaje, o unidades de vista Como son más frecuentes, son unidades CSS sensibles que le permiten definir dimensiones. como un porcentaje del ancho o la longitud de la ventana gráfica. Las unidades de ventana gráfica pueden ser bastante útiles en los casos en que otras unidades de CSS sensibles, como los porcentajes, son difícil de hacer trabajar.

A pesar de que Documentación del W3C en las vistas de las unidades contiene todo lo que se puede poner en teoría, no es muy detallado. Entonces, en este artículo, veremos cómo estas unidades CSS trabajo en practica.

Altura de la ventana gráfica (vh) y ancho de la ventana gráfica (vw)

W3C define viewport como “tamaño del bloque que contiene inicial”. En otras palabras, la vista es el área contenido dentro de la ventana del navegador o cualquier otra área de visualización en una pantalla.

los vw y vh unidades representa el porcentaje del ancho y la altura de la ventana gráfica real. Pueden tomar un valor. entre 0 y 100 De acuerdo a las siguientes reglas:

 100vw = 100% del ancho del viewport 1vw = 1% del ancho del viewport 100vh = 100% del alto del viewport 1vh = 1% del alto del viewport 

Diferencias a unidades porcentuales.

Entonces, ¿en qué se diferencian las unidades de ventana gráfica de las unidades porcentuales? Unidades porcentuales Hereda el tamaño de su elemento padre. mientras que las unidades viewport no lo hacen. Las unidades de la ventana gráfica siempre se calculan como porcentaje del tamaño de la ventana gráfica. Como resultado, un elemento definido por unidades de viewport puede exceder el tamaño de su elemento principal.

Ejemplo: secciones de pantalla completa

Secciones de pantalla completa Son probablemente los casos de uso más conocidos de las unidades de viewport..

los HTML es bastante simple; solo tenemos tres secciones una debajo de la otra y queremos que cada uno de ellos cubrir toda la pantalla (pero no más).

En el CSS, usamos 100vh como un altura valor y 100% como anchura. No usamos el vw unidad aquí como por defecto, También se agregan barras de desplazamiento al tamaño de la ventana gráfica. Entonces, si usamos el ancho: 100vw; gobernar un barra de desplazamiento horizontal aparecería en el parte inferior de la ventana del navegador.

 * margen: 0; relleno: 0;  seccion background-size: cover; posición de fondo: centro; ancho: 100%; altura: 100vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

En la siguiente demostración de gif, puedes ver que vh es verdaderamente una unidad de respuesta.

Según los documentos del W3C, lo anterior problema de la barra de desplazamiento horizontal se puede resolver añadiendo el desbordamiento: auto; gobernar al elemento raíz. Esta solución solo funciona parcialmente, aunque. La barra de desplazamiento horizontal, en efecto, desaparece pero anchura es todavía calculado en función del ancho de la ventana gráfica (la barra lateral incluida), por lo que los elementos serán ligeramente más grandes de lo que deberían ser.

Yo diría, no me atrevería a usar el vw unidad en dimensionar elementos de pantalla completa por esta razón Ni siquiera lo necesitamos, como el ancho: 100%; La regla funciona perfectamente. Con diseños de pantalla completa, el verdadero desafío siempre ha sido cómo establecer un valor de altura adecuado y el vh unidad da una solución brillante para eso.

Otros casos de uso

Si usted está interesado en otros casos de uso vw y vh Lullabot tiene un gran artículo que enumera una Un puñado de ejemplos de la vida real. (Con demostraciones de Codepen), tales como:

• Tarjetas de relación fija.
• Manteniendo un elemento más corto que la pantalla..
• Texto de escala.
• Salir del contenedor.

Opera.dev también tiene un breve tutorial sobre cómo puede aprovechar el vw unidad en creando tipografía responsiva.

No solo se pueden usar unidades de vista en el anchura y altura Propiedades pero sobre cualquier otra. Por ejemplo, usted puede Establecer el tamaño de los rellenos y márgenes. utilizando la vw y vh unidades, también.

Viewport min (vmin) & viewport max (vmax)

los vmin y vmax unidades le permiten acceder a la Tamaño del lado más pequeño o más grande. de la vista, según las siguientes reglas:

 100vmin = 100vw o 100vh, el que sea menor 1vmin = 1vw o 1vh, el que sea menor 100vmax = 100vw o 100vh, el que sea mayor 1vmax = 1vw o 1vh, el que sea mayor 

Así, en caso de una Orientación Vertical, 100vmin es igual a 100vw, como el viewport es más pequeño horizontalmente que verticalmente. Por la misma razón, 100vmax será igual a 100vh.

Del mismo modo, en caso de una orientación horizontal, 100vmin es igual a 100vh, como el viewport es más pequeño verticalmente que horizontalmente. Y por supuesto, 100vmax será igual a 100vw aquí.

Ejemplo: hacer textos de héroe legibles en cada pantalla

los vmin y vmax Las unidades son mucho menos conocidas que vw y vh. Sin embargo, pueden ser excelentemente utilizados como sustituto de la orientación @medios de comunicación consultas. Por ejemplo, vmin y vmax Puede ser útil cuando tienes elementos que pueden parecer extraños. en diferentes relaciones de aspecto.

El Nuevo Código tiene un gran tutorial en el que discuten cómo puedes mantener el texto del héroe legible en cada pantalla, usando el vmin unidad. Los textos de héroes son propensos a verse. demasiado pequeño en el móvil y demasiado grande en los monitores grandes.

Aquí está la idea principal de su solución:

 h1 font-size: 20vmin; Familia tipográfica: Avenir, sans-serif; peso de la fuente: 900; text-align: center;  

En la demo de Codepen, puedes ver cómo vmin Resuelve el problema de legibilidad de los textos de héroe. Acceder al “Página completa” ver en Codepen, entonces cambiar el tamaño de la ventana de su navegador Tanto horizontal como verticalmente para ver cómo cambia el texto del héroe..

Soporte del navegador

Como se puede ver en la tabla de CanIUse a continuación, el soporte del navegador es relativamente bueno para unidades de viewport. Sin embargo, tenga en cuenta que algunas versiones de IE y Edge no son compatibles vmax. Además, iOS 6 y 7 tienen un problema con el vh unidad, el cual fue arreglado en iOS 8.