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 del área de visualización son unidades de medida relativas que se basan en el tamaño del área de visualización del navegador (la zona visible de la página web). Permiten crear diseños adaptables ajustando proporcionalmente el tamaño de los elementos y del texto al ancho o al alto del área de visualización. Las unidades del área de visualización son especialmente útiles para crear diseños fluidos, escalar el texto y posicionar elementos de una manera que se adapte a distintos tamaños de pantalla.

Hay cuatro unidades de ventana gráfica:

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

vh (altura del área de visualización): representa el 1 % de la altura del área de visualización. Por ejemplo, 25vh equivale al 25 % de la altura del área de visualización.

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 de la ventana gráfica): representa el 1 % de la dimensión mayor de la ventana gráfica (ancho o alto). Por ejemplo, si la ventana gráfica es más ancha que alta, 8vmax equivale al 8 % del ancho de la ventana gráfica.

Esta es la sintaxis básica para usar unidades de ventana gráfica:

selector {
    property: value;
}

selector: El selector de CSS que selecciona los elementos HTML a los que quieres aplicar estilos.

property: La propiedad CSS que quieres establecer (por ejemplo, width, height, font-size, margin, padding).

value: Un valor que incluye unidades del área de visualización (p. ej., 50vw, 75vh, 10vmin, 5vmax).

Por ejemplo:

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

En este ejemplo, el elemento .box tiene un ancho de 50vw y una altura de 30vh, por lo que se adapta tanto al ancho como a la altura de la ventana gráfica.

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 usar unidades de ventana gráfica para hacer que estos elementos sean adaptables. Sigue los pasos a continuación:

Escribe una regla CSS que seleccione el elemento <h1>. Establece su font-size en 6vw.
Escribe una regla CSS que seleccione el elemento <p>. Establece su font-size en 4vmin.
Escribe una regla CSS que seleccione el 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>