Unidades de Viewport

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 64 de 76.

En CSS, las unidades de viewport son unidades de medida relativas que se basan en el tamaño del viewport del navegador (el área visible de la página web). Proporcionan una forma de crear diseños adaptables dimensionando elementos y texto proporcionalmente al ancho o alto del viewport. Las unidades de viewport son particularmente útiles para crear diseños fluidos, escalar texto y posicionar elementos de una manera que se adapte a diferentes tamaños de pantalla.

Hay cuatro unidades de viewport:

vw (ancho de la ventana gráfica): Representa el 1% del ancho de la ventana gráfica. Por ejemplo, 10vw es igual al 10% del ancho de la ventana gráfica.

vh (altura del viewport): Representa el 1% de la altura del viewport. Por ejemplo, 25vh es igual al 25% de la altura del viewport.

vmin (mínimo del viewport): Representa el 1% de la dimensión más pequeña del viewport (ancho o alto). Por ejemplo, si el viewport es más ancho que alto, 5vmin es igual al 5% de la altura del viewport.

vmax (máximo del viewport): Representa el 1% de la dimensión más grande del viewport (ancho o alto). Por ejemplo, si el viewport es más ancho que alto, 8vmax es igual al 8% del ancho del viewport.

Aquí está la sintaxis básica para usar unidades de viewport:

selector {
    property: value;
}

selector: El selector CSS que apunta al elemento o elementos HTML a los que quieres dar estilo.

property: La propiedad CSS que deseas establecer (p. ej., width, height, font-size, margin, padding).

value: Un valor que incluye unidades de viewport (p. ej., 50vw, 75vh, 10vmin, 5vmax).

Por ejemplo:

.box {
    width: 50vw; /* El ancho de la caja será el 50% del ancho de la ventana gráfica */
    height: 30vh; /* La altura de la caja será el 30% de la altura de la ventana gráfica */
}

En este ejemplo, el elemento .box tiene un ancho de 50vw y una altura de 30vh, lo que lo hace adaptable tanto al ancho como a la altura de la ventana gráfica (viewport).

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Tu tarea es utilizar unidades de viewport para hacer que estos elementos sean responsivos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h1>. Establece su font-size en 6vw.
Escribe una regla CSS que apunte al elemento <p>. Establece su font-size en 4vmin.
Escribe una regla CSS que apunte al elemento <div>. Establece su width en 80vw y su height en 50vh.

Hoja de referencia

Las unidades de viewport son unidades relativas basadas en el tamaño del viewport del navegador, útiles para crear diseños responsivos.

Cuatro unidades de viewport:

vw (viewport width): 1% del ancho del viewport
vh (viewport height): 1% de la altura del viewport
vmin (viewport minimum): 1% de la dimensión más pequeña del viewport
vmax (viewport maximum): 1% de la dimensión más grande del viewport

Sintaxis básica:

selector {
    property: value;
}

Ejemplo:

.box {
    width: 50vw; /* 50% del ancho del viewport */
    height: 30vh; /* 30% de la altura del viewport */
}

Pruébalo tú mismo

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>