Las unidades de visualización han existido durante varios años, con un soporte casi perfecto en los principales navegadores, pero sigo encontrando formas nuevas y emocionantes de usarlas. Pensé que sería divertido revisar los conceptos básicos y luego resumir algunos de mis casos de uso favoritos.
¿Qué son las unidades de ventana gráfica?
Cuatro nuevas unidades “relativas a la ventana gráfica” aparecieron en las especificaciones de CSS entre 2011 y 2015, como parte del Módulo de Unidades y Valores de CSS del W3C Nivel 3. Las nuevas unidades – vw, vh, vmin, y vmax – funcionan de manera similar a las unidades de longitud existentes como px o em, pero representan un porcentaje de la ventana gráfica del navegador actual.
- Ancho de la ventana gráfica (
vw): Un porcentaje del ancho completo de la ventana gráfica.10vwse resolverá al 10% del ancho actual de la ventana gráfica, o48pxen un teléfono que es480pxancho. La diferencia entre%yvwes más similar a la diferencia entreemyrem. A%La longitud es relativa al ancho del contexto local (que contiene el elemento), mientras que unvwla longitud es relativa al ancho total de la ventana del navegador. - Altura de la ventana gráfica (
vh): Un porcentaje de la altura completa de la ventana gráfica.10vhresolverá a10%de la altura actual de la ventana gráfica. - Viewport mínimo (
vmin): Un porcentaje del ancho o alto de la ventana gráfica, el que sea menor.10vminresolverá a10%del ancho actual de la ventana gráfica en orientaciones verticales, y10%de la altura de la ventana gráfica en orientaciones horizontales. - Máximo de la ventana gráfica (
vmax): Un porcentaje del ancho o alto de la ventana gráfica, el que sea mayor.10vmaxresolverá a10%de la altura actual de la ventana gráfica en orientaciones verticales, y10%del ancho de la ventana gráfica en orientaciones horizontales. Triste y extrañamentevmaxlas unidades aún no están disponibles en Internet Explorer o Edge.
Si bien estas unidades se derivan de la altura o el ancho de la ventana gráfica, todas se pueden usar en todos los lugares donde se aceptan longitudes, desde font-size al posicionamiento, márgenes, relleno, sombras, bordes, etc. ¡Veamos qué podemos hacer!
Tipografía receptiva
Se ha vuelto muy popular usar unidades de ventana gráfica para tipografía receptiva, estableciendo tamaños de fuente que crecen y se reducen según el tamaño de ventana actual. El uso de unidades de visualización simples para el tamaño de fuente tiene un efecto interesante (peligroso). Como puede ver, las fuentes escalan muy rápidamente, ajustándose de un tamaño ilegible a un tamaño extra grande en un rango muy pequeño.
Esta escala directa es claramente demasiado dramática para el uso diario. Necesitamos algo más sutil, con mínimos y máximos, y más control de la tasa de crecimiento. Ahí es donde calc() se vuelve útil. Podemos combinar un tamaño base en unidades más estables (digamos 16px) con un ajuste relativo de la ventana gráfica más pequeño (0.5vw) y deje que el navegador haga los cálculos: calc(16px + 0.5vw)
Consulte el tipo de lápiz parcialmente receptivo de Miriam Suzanne (@mirisuzanne) en CodePen.
Al cambiar la relación entre el tamaño base y el ajuste relativo de la ventana gráfica, puede cambiar la magnitud de la tasa de crecimiento. Use valores de ventana gráfica más altos en los títulos y observe cómo crecen más rápidamente que el texto circundante. Esto permite una escala tipográfica más dinámica en pantallas más grandes, mientras mantiene las fuentes restringidas en un dispositivo móvil, sin necesidad de consultas de medios. También puede aplicar esta técnica a la altura de su línea, lo que le permite ajustar el avance a una velocidad diferente a la font-size.
body {
// font grows 1px for every 100px of viewport width
font-size: calc(16px + 1vw);
// leading grows along with font,
// with an additional 0.1em + 0.5px per 100px of the viewport
line-height: calc(1.1em + 0.5vw);
}Para mí, esto es suficiente complejidad. Si necesito restringir el extremo superior para encabezados de rápido crecimiento, puedo hacerlo con una sola consulta de medios siempre que el texto se vuelva demasiado grande:
h1 {
font-size: calc(1.2em + 3vw);
}
@media (min-width: 50em) {
h1 {
font-size: 50px;
}
}De repente, desearía que hubiera un max-font-size propiedad.
Otros han desarrollado cálculos más complejos y combinaciones de Sass para especificar los rangos exactos de tamaño de texto en consultas de medios específicas. Existen varios artículos de Programar Plusque explican la técnica y proporcionan fragmentos para ayudarlo a comenzar:
- Tipografía de tamaño de ventana gráfica con tamaños mínimo y máximo
- Tipografía fluida
- La matemática de los bloqueos CSS
Creo que es exagerado en la mayoría de los casos, pero su kilometraje variará absolutamente.
Diseños de altura completa, imágenes de héroe y pies de página adhesivos
Hay muchas variaciones en los diseños de altura completa (o con restricciones de altura), desde interfaces de estilo de escritorio hasta imágenes de héroe, diseños espaciosos y pies de página adhesivos. Las unidades de visualización pueden ayudar con todo esto.
en un interfaz de altura completa estilo escritorio, la página a menudo se divide en secciones que se desplazan individualmente, con elementos como encabezados, pies de página y barras laterales que permanecen en su lugar en cualquier tamaño. Esta es una práctica común para muchas aplicaciones web en estos días, y vh las unidades lo hacen mucho más simple. A continuación, se muestra un ejemplo que utiliza la nueva sintaxis de cuadrícula CSS:
Vea la cuadrícula CSS de altura completa de Pen de Miriam Suzanne (@mirisuzanne) en CodePen.
Una sola declaración sobre el body elemento, height: 100vh, restringe su aplicación a la altura de la ventana gráfica. Asegúrate de aplicar overflow valores en elementos internos, por lo que su contenido no se corta. También puede lograr este diseño utilizando flexbox o flotadores. Tenga en cuenta que los diseños de altura completa pueden causar problemas en algunos navegadores móviles. Hay una solución inteligente para iOs Safari, que usamos para manejar uno de los casos de borde más notables.
Pie de página pegajoso se puede crear con una técnica similar. Cambia tu cuerpo height: 100vh a min-height: 100vh y el pie de página permanecerá en su lugar en la parte inferior de la pantalla hasta que el contenido lo empuje hacia abajo.
Vea Pen Sticky-Footer con CSS Grid de Miriam Suzanne (@mirisuzanne) en CodePen.
Solicitar vh unidades a la height, min-height, o Altura máxima de varios elementos para crear secciones de pantalla completa, imagenes de heroe, y más. En el nuevo rediseño de OddBird, restringimos nuestras imágenes de héroe con max-height: 55vh para que nunca eliminen los titulares de la página. En mi sitio web personal, fui con max-height: 85vh para una apariencia más dominada por la imagen. En otros sitios, he aplicado min-height: 90vh a las secciones.
Aquí hay un ejemplo que muestra tanto un gatito heroico de altura máxima como una sección de altura mínima. La combinación de todos estos trucos puede brindarle un control poderoso sobre cómo su contenido llena una ventana del navegador y responde a diferentes ventanas gráficas.
Relaciones de aspecto de fluidos
También puede resultar útil restringir la relación entre la altura y el ancho de un elemento. Esto es especialmente útil para contenido incrustado, como videos. Chris ha escrito sobre esto antes. En los buenos tiempos, hacíamos eso con %acolchado basado en un elemento contenedor y posicionamiento absoluto en el elemento interior. Ahora, a veces podemos usar unidades de ventana gráfica para lograr ese efecto sin el marcado adicional.
Si podemos contar con que el video será de pantalla completa, podemos establecer nuestra altura en relación con el ancho completo de la ventana gráfica:
/* full-width * aspect-ratio */
.full-width {
width: 100vw;
height: calc(100vw * (9/16));
}Esa matemática no tiene por qué suceder en el navegador con calc. Si está utilizando un preprocesador como Sass, funcionará igual de bien para hacer los cálculos allí: height: 100vw * (9/16). Si necesita restringir el ancho máximo, también puede restringir la altura máxima:
/* max-width * aspect-ratio */
.full-width {
width: 100vw;
max-width: 30em;
height: calc(100vw * (9/16));
max-height: calc(30em * (9/16));
}Aquí hay una demostración que muestra ambas opciones, con propiedades personalizadas de CSS (variables) para hacer las matemáticas más semánticas. Juega con los números para ver cómo se mueven las cosas, manteniendo la proporción adecuada en todo momento:
Consulte las proporciones de fluidos de la pluma con unidades de ventana de Miriam Suzanne (@mirisuzanne) en CodePen.
Chris va un paso más allá en su artículo previo a las unidades de ventana gráfica, así que nosotros también lo haremos. ¿Qué pasa si necesitamos contenido HTML real para escalar dentro de una proporción establecida, como suelen hacer las diapositivas de presentación?
Podemos configurar todas nuestras fuentes y tamaños internos usando las mismas unidades de ventana que el contenedor. En este caso usé vmin para todo, por lo que el contenido se escalaría con cambios en la altura y el ancho del contenedor:
Consulte las relaciones de deslizamiento de fluido de la pluma con unidades de ventana de Miriam Suzanne (@mirisuzanne) en CodePen.
Rompiendo el contenedor
Durante años, ha sido popular mezclar texto restringido con fondos de ancho completo. Dependiendo de su marcado o CMS, eso puede resultar difícil. ¿Cómo se puede dividir el contenido fuera de un contenedor restringido para que llene la ventana gráfica exactamente?
Una vez más, las unidades de ventana gráfica pueden resultar útiles. Este es otro truco que hemos usado en el nuevo sitio OddBird, donde un generador de sitio estático a veces limita nuestro control del marcado. Solo se necesitan unas pocas líneas de código para que esto funcione.
.full-width {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}Hay artículos más detallados sobre la técnica, tanto en Cloud Four como aquí en CSS Tricks.
Poniéndose raro
Por supuesto, hay mucho más que puede hacer con las unidades de ventana gráfica, si comienza a experimentar. Echa un vistazo a este indicador de desplazamiento CSS puro (creado por alguien llamado Mike) utilizando unidades de visualización en una imagen de fondo:
Vea el indicador de desplazamiento Pen CSS only de Mike (@MadeByMike) en CodePen.
¿Qué más ha visto o hecho con las unidades de ventana gráfica? ¡Sea creativo y muéstrenos los resultados!