4.1 Valeurs en pourcentage
Les valeurs en pourcentage et les unités relatives en CSS jouent un rôle important dans la création de mises en page flexibles et réactives. Elles permettent aux éléments de s'adapter à différentes tailles d'écran et à des conditions changeantes, assurant une meilleure compatibilité et facilité d'utilisation.
Les valeurs en pourcentage sont utilisées pour définir les tailles des éléments par rapport à la taille de leurs éléments parents. Cela rend la mise en page plus flexible et adaptable.
Exemple d'utilisation de % :
.container {
width: 80%;
margin: 0 auto;
background-color: #f4f4f4;
}
.box {
width: 50%;
padding-top: 25%; /* Rapport d'aspect 1:2 */
background-color: #3498db;
color: white;
text-align: center;
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 50%; /* Rapport d'aspect 2:1 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'utilisation de %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="min-height: 200px;">
<div class="container">
<div class="box">Contenu</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'utilisation de %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Contenu</div>
</div>
</body>
</html>
Explication du code :
.container: définit la largeur du conteneur à 80% de la largeur de l'élément parent, le centrant avecmargin: 0 auto.box: définit la largeur de la boîte à 50% de la largeur du conteneur. La hauteur de la boîte est déterminée parpadding-top, ce qui assure un rapport d'aspect 1:2
4.2 Unités relatives (em et rem)
Unité em — c'est une unité relative qui dépend de la taille de la police de l'élément parent. Si la taille de la police du parent change,
les valeurs em changent aussi.
Exemple d'utilisation de em :
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 16px = 16px */
}
Unité rem — c'est une unité relative qui dépend de la taille de la police de l'élément racine (html).
Elle ne dépend pas des éléments parents, ce qui la rend plus prévisible et pratique pour créer des mises en page évolutives.
Exemple d'utilisation de rem :
<div class="container">
Quelque texte à l'intérieur du conteneur
<div class="box">
Quelque texte à l'intérieur de la boîte
</div>
</div>
html {
font-size: 16px;
}
.container {
font-size: 1rem; /* 16px */
padding: 2rem; /* 32px */
}
.box {
font-size: 1.5rem; /* 24px */
margin: 1rem; /* 16px */
}
Comparaison entre em et rem:
em: dépend de la taille de la police de l'élément parent, ce qui peut conduire à un effet de cascade en cas d'imbricationrem: dépend de la taille de la police de l'élément racine (html), ce qui la rend plus prévisible et facile à utiliser
4.3 Utilisation combinée de %
L'utilisation des unités relatives (em et rem) combinée avec des pourcentages permet de créer des mises en page
flexibles et adaptatives, qui s'afficheront correctement sur tous les appareils.
Exemple : Utilisation combinée de %
Créons une mise en page où les tailles des éléments sont définies à l'aide de pourcentages et d'unités relatives.
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.sidebar {
flex: 1 1 30%;
background-color: #f4f4f4;
padding: 1rem;
}
.main {
flex: 1 1 70%;
background-color: #e4e4e4;
padding: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilisation combinée de % et d'unités relatives</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">En-tête</div>
<div class="content">
<div class="sidebar">Barre latérale</div>
<div class="main">Contenu principal</div>
</div>
<div class="footer">Pied de page</div>
</div>
</body>
</html>
Explication du code :
html: fixe la taille de police de base pour tout le document.container: utilise les pourcentages pour définir la largeur du conteneur et le centrer sur la page.headeret.footer: utilisentrempour les marges, ce qui les rend prévisibles.content: utilise Flexbox pour organiser la barre latérale et le contenu principal avec un espace entre eux.sidebaret.main: utilisent les pourcentages pour définir la largeur des colonnes etrempour les marges
GO TO FULL VERSION