Unités de Viewport

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 64 sur 76.

En CSS, les unités de viewport sont des unités de mesure relatives basées sur la taille du viewport du navigateur (la zone visible de la page web). Elles permettent de créer des designs réactifs en dimensionnant les éléments et le texte proportionnellement à la largeur ou à la hauteur du viewport. Les unités de viewport sont particulièrement utiles pour créer des mises en page fluides, mettre le texte à l'échelle et positionner les éléments de manière à ce qu'ils s'adaptent aux différentes tailles d'écran.

Il existe quatre unités de fenêtre d'affichage :

vw (largeur de la fenêtre d'affichage) : représente 1 % de la largeur de la fenêtre d'affichage. Par exemple, 10vw est égal à 10 % de la largeur de la fenêtre d'affichage.

vh (hauteur de la fenêtre d'affichage) : représente 1 % de la hauteur de la fenêtre d'affichage. Par exemple, 25vh est égal à 25 % de la hauteur de la fenêtre d'affichage.

vmin (viewport minimum) : représente 1 % de la plus petite dimension de la fenêtre d'affichage (largeur ou hauteur). Par exemple, si la fenêtre d'affichage est plus large qu'elle n'est haute, 5vmin est égal à 5 % de la hauteur de la fenêtre d'affichage.

vmax (viewport maximum) : représente 1 % de la plus grande dimension de la fenêtre d'affichage (largeur ou hauteur). Par exemple, si la fenêtre d'affichage est plus large que haute, 8vmax est égal à 8 % de la largeur de la fenêtre d'affichage.

Voici la syntaxe de base pour utiliser les unités de viewport :

selector {
    property: value;
}

selector: Le sélecteur CSS qui cible le ou les éléments HTML que vous souhaitez styliser.

property : La propriété CSS que vous souhaitez définir (par ex., width, height, font-size, margin, padding).

value : une valeur qui inclut des unités de fenêtre d'affichage (viewport) (par ex., 50vw, 75vh, 10vmin, 5vmax).

Par exemple :

.box {
    width: 50vw; /* La largeur de la boîte sera de 50 % de la largeur de la fenêtre d'affichage */
    height: 30vh; /* La hauteur de la boîte sera de 30 % de la hauteur de la fenêtre d'affichage */
}

Dans cet exemple, l'élément .box a une largeur de 50vw et une hauteur de 30vh, ce qui le rend réactif à la fois à la largeur et à la hauteur de la fenêtre d'affichage.

Défi

Facile

On vous donne un document HTML avec un titre (<h1>), un paragraphe (<p>) et une division (<div>). Votre tâche consiste à utiliser les unités de mesure du viewport pour rendre ces éléments réactifs. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h1>. Définissez sa propriété font-size sur 6vw.
Écrivez une règle CSS qui cible l'élément <p>. Définissez sa propriété font-size sur 4vmin.
Écrivez une règle CSS qui cible l'élément <div>. Définissez sa propriété width sur 80vw et sa propriété height sur 50vh.

Aide-mémoire

Les unités de viewport sont des unités relatives basées sur la taille de la fenêtre d'affichage du navigateur, utiles pour créer des designs réactifs.

Quatre unités de viewport :

vw (viewport width) : 1 % de la largeur du viewport
vh (viewport height) : 1 % de la hauteur du viewport
vmin (viewport minimum) : 1 % de la plus petite dimension du viewport
vmax (viewport maximum) : 1 % de la plus grande dimension du viewport

Syntaxe de base :

selector {
    property: value;
}

Exemple :

.box {
    width: 50vw; /* 50% of viewport width */
    height: 30vh; /* 30% of viewport height */
}

Essayez vous-même

<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>