Unidades viewport CSS

¿Qué es el viewport?

• El viewport es el área visible de una página web en el dispositivo del usuario. Es decir, lo que realmente se muestra en la pantalla sin necesidad de hacer scroll.
  • En una pantalla de móvil, el viewport suele ser mucho más estrecho que en un ordenador.
  • Todo lo que veas al cargar una web sin desplazarte, es el viewport.
• Es el punto de referencia de muchas unidades relativas modernas, como vw, vh, vmin y vmax.

¿Qué son las unidades viewport?

• Las unidades viewport son unidades relativas al tamaño de la ventana del navegador.

  Unidad	Significado
  1vw	1% del ancho del viewport.
  1vh	1% del alto del viewport.
  1vmin	1% de la menor dimensión del viewport (ancho o alto).
  1vmax	1% de la mayor dimensión del viewport (ancho o alto).

• Estas unidades permiten diseñar interfaces responsivas sin depender de media queries ni cálculos complejos.

¿Por qué son importantes?

• Permiten escalar elementos según el tamaño real de pantalla.
• Son muy útiles para tamaños de fuente, secciones completas, márgenes o layouts fluidos.
• También son clave en el enfoque Mobile First.
• Las usan navegadores modernos y son compatibles prácticamente con todo.

Ejemplos prácticos

vw – Viewport Width

• Uso típico: adaptar anchos, tamaños de fuente o márgenes al ancho del dispositivo.

  /* Full width hero section */
  .hero {
    width: 100vw;
    height: 60vh;
    background-color: navy;
    color: white;
  }
  
  /* Responsive heading */
  h1 {
    font-size: 6vw; /* Scales with screen width */
    margin: 0;
  }
  

vh – Viewport Height

• Uso típico: crear secciones a pantalla completa, controlar márgenes o alturas proporcionales.

  /* Full screen modal */
  .modal {
    height: 100vh;
    width: 100vw;
    background-color: black;
  }
  
  /* Top spacing that scales with screen height */
  .section {
    margin-top: 10vh;
  }
  

vmin – Mínimo entre ancho y alto

• Uso típico: mantener proporciones cuadradas en pantallas tanto verticales como horizontales. Muy útil para elementos circulares o gráficos.

  /* Responsive box: always 50% of the smaller dimension */
  .box {
    width: 50vmin;
    height: 50vmin;
    background-color: teal;
  }
  

vmax – Máximo entre ancho y alto

• Uso típico: asegurar que un elemento cubra la pantalla entera o mantener proporciones grandes en pantallas panorámicas.

  /* Background image that covers most of the largest dimension */
  .background {
    height: 100vmax;
    background-image: url('https://images.unsplash.com/photo-1503431128871-cd250803fa41?q=80&w=4140&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-size: cover;
    background-position: center;
  }
  

Bonus: Diferencia entre vmin y vmax, según la orientación

• En un móvil en vertical:
  • vmin = ancho (más pequeño).
  • vmax = alto (más grande).
• En horizontal:
  • vmin = alto.
  • vmax = ancho.
• Esto permite adaptar dinámicamente elementos según la orientación del dispositivo sin necesidad de media queries adicionales.

¿Y qué pasa con calc()?

• Puedes combinar unidades vw, vh etc. con otras unidades usando la función calc().

  .container {
    padding: 2rem;
    background-color: goldenrod;
    width: calc(100vw - 323px); /* Full width - N value */
  }
  

• También puedes mezclar porcentajes, rems o pixeles con unidades viewport para lograr un diseño más preciso.

• Veremos calc() (y otras funciones) con en más profundidad en un fundamental posterior.

Enlaces útiles

• MDN: Viewport
• MDN: CSS values and units
• MDN: vw unit
• MDN: vmin / vmax
• MDN: calc()