Unidades del viewport

Parte de la sección Estilos con 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 de la ventana gráfica): Representa el 1 % de la dimensión más pequeña de la ventana gráfica (ancho o alto). Por ejemplo, si la ventana gráfica es más ancha que alta, 5vmin equivale al 5 % de la altura de la ventana gráfica.

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.

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>