7.1 Principes de base
Les polices réactives jouent un rôle crucial dans la création d'un design web adaptatif. L'utilisation d'unités relatives, telles que vw, vh, vmin, et vmax, permet aux polices de changer dynamiquement en fonction des dimensions du viewport, assurant ainsi un affichage optimal du texte sur différents appareils. Voyons plus en détail comment ces unités fonctionnent et comment les utiliser pour créer des polices réactives.
Concepts de base
vw et vh :
vw(viewport width) : 1 unitévwéquivaut à 1% de la largeur du viewportvh(viewport height) : 1 unitévhéquivaut à 1% de la hauteur du viewport
vmin et vmax :
vmin(viewport minimum) : 1 unitévminéquivaut à 1% de la plus petite dimension du viewport (soit la largeur, soit la hauteur)vmax(viewport maximum) : 1 unitévmaxéquivaut à 1% de la plus grande dimension du viewport (soit la largeur, soit la hauteur)
Avantages des polices réactives :
- Amélioration de la lisibilité : la taille de la police s'ajuste automatiquement en fonction des dimensions de l'écran, garantissant une lecture confortable sur tous les appareils
- Flexibilité du design : les polices réactives aident à maintenir un design harmonieux et équilibré lors du changement des dimensions du viewport
- Approche unifiée : l'utilisation d'unités relatives pour les polices permet de maintenir une approche unifiée dans la création d'un design adaptatif
7.2 Exemples d’utilisation de vw et vh
Exemple 1 : Taille de police de base avec vw
Créons un exemple où la taille de la police change en fonction de la largeur du viewport :
body {
font-size: 2vw; /* La taille de la police est de 2% de la largeur du viewport */
}
h1 {
font-size: 4vw; /* La taille de la police du titre est de 4% de la largeur du viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Police Réactive avec vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titre Réactif</h1>
<p>Ce texte change de taille en fonction de la largeur du viewport.</p>
</body>
</html>
Explication du code :
body { font-size: 2vw; }: définit la taille de la police pour le texte à l'intérieur debody, égale à 2% de la largeur du viewporth1 { font-size: 4vw; }: définit la taille de la police pour le titreh1, égale à 4% de la largeur du viewport
Exemple 2 : Taille de police de base avec vh
Créons maintenant un exemple où la taille de la police change en fonction de la hauteur du viewport :
body {
font-size: 2vh; /* La taille de la police est de 2% de la hauteur du viewport */
}
h1 {
font-size: 4vh; /* La taille de la police du titre est de 4% de la hauteur du viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Police Réactive avec vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titre Réactif</h1>
<p>Ce texte change de taille en fonction de la hauteur du viewport.</p>
</body>
</html>
Explication du code :
body { font-size: 2vh; }: définit la taille de la police pour le texte à l'intérieur debody, égale à 2% de la hauteur du viewporth1 { font-size: 4vh; }: définit la taille de la police pour le titreh1, égale à 4% de la hauteur du viewport
7.3 Exemples d’utilisation de vmin et vmax
Exemple 1 : Taille de police de base avec vmin
Créons un exemple où la taille de la police change en fonction de la plus petite dimension du viewport :
body {
font-size: 2vmin; /* La taille de la police est de 2% de la plus petite dimension du viewport */
}
h1 {
font-size: 4vmin; /* La taille de la police du titre est de 4% de la plus petite dimension du viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Police Réactive avec vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titre Réactif</h1>
<p>Ce texte change de taille en fonction de la plus petite dimension du viewport.</p>
</body>
</html>
Explication du code :
body { font-size: 2vmin; }: définit la taille de la police pour le texte à l'intérieur debody, égale à 2% de la plus petite dimension du viewporth1 { font-size: 4vmin; }: définit la taille de la police pour le titreh1, égale à 4% de la plus petite dimension du viewport
Exemple 2 : Taille de police de base avec vmax
Créons un exemple où la taille de la police change en fonction de la plus grande dimension du viewport :
body {
font-size: 2vmax; /* La taille de la police est de 2% de la plus grande dimension du viewport */
}
h1 {
font-size: 4vmax; /* La taille de la police du titre est de 4% de la plus grande dimension du viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Police Réactive avec vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Titre Réactif</h1>
<p>Ce texte change de taille en fonction de la plus grande dimension du viewport.</p>
</body>
</html>
Explication du code :
body { font-size: 2vmax; }: définit la taille de la police pour le texte à l'intérieur debody, égale à 2% de la plus grande dimension du viewporth1 { font-size: 4vmax; }: définit la taille de la police pour le titreh1, égale à 4% de la plus grande dimension du viewport
GO TO FULL VERSION