Traduction
Tutoriel CSS3 - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
En CSS, il existe de nombreuses unités de mesure qui permettent de définir les dimensions des boites, les tailles de police,
les espacements, etc.
Certaines unités de mesure ont été introduites par la norme CSS3 : rem, vh, vw. Ces dernières sont très intéressantes comme vous allez le découvrir dans ce chapitre ...
Ces unités se divisent en deux catégories : unités absolues et unités relatives.
Les unités absolues sont fixes et ne dépendent pas d'autres valeurs (élément parent, dimensions de la fenêtre, etc).
Ce sont :
Les unités absolues telles cm, pc ne doivent être utilisées que dans le cadre d'une feuille de style pour impression.
Je vous invite à revoir le chapitre en lien ci-dessous :
les feuilles de style pour l'impression
Dans le cadre d'un site 'responsive' évitez de définir les largeurs des grandes divisions de la page avec l'unité de mesure px.
Les unités relatives dépendent d'autres valeurs, ce qui les rend plus flexibles et adaptées à des mises en page "responsives".
Les quelques unités que vous pouvez utiliser :
L'unité em est une unité qui correspond à la taille de la police de l'élément en cours.
Si la taille de la police n'est pas redéfinie, elle est alors relative à la taille de la police de l'élément parent.
Il est d'usage d'exprimer les marges externes (margin) et internes (padding) avec l'unité em.
Exemple :
body {font-size : 20px;}
main {font-size : 1.5em}
p {font-size : 1em}
h1 {font-size : 2em }
Les éléments P et H1 sont enfants de MAIN ; MAIN est enfant de BODY.
La taille de police pour les titres H1 sera de : 2 * 1.5 * 20px = 60px ; ce qui est énorme ...
La taille de police pour les paragraphes sera de : 1*1.5 *20px = 30px ; ce qui est beaucoup ...
L'unité rem ne se réfère pas à l'élément parent mais à l'élément racine (BODY ou HTML). Donc il n'y a pas l'effet en cascade comme avec em.
Exemple d'emploi de rem :
body {font-size : 20px;}
main {font-size : 1.5rem}
p {font-size : 1rem ; }
h1 {font-size : 2rem;}
Donc les titres H1 seront affichés en 40px (2 * 20px) et les paragraphes en 20px (1 * 20px).
Rappel : le viewport est la fenêtre d'affichage créée par le navigateur.
Exprimer la largeur d'un élément en vw revient donc à une largeur constante par rapport au viewport.
Exemple d'emploi de vw :
body {width :100vw;}
nav {width : 28% ; }
section {width : 68%;}
div {width : 30vw;}
La page a pour largeur celle de la fenêtre.
Les éléments DIV auront toujours une largeur égale à 30% de celle de la fenêtre quelque soit leur parent
(BODY ou SECTION).
Exemple d'emploi de vh :
h1,h2{margin : 1vh 0}
Les marges haut et bas des éléments H1 & H2 font 1% de la hauteur du viewport ; les marges gauche et droite font zéro.
Cette unité de mesure est utilisée pour définir les largeurs de boites, des images.
Attention le pourcentage fait référence à l'élément parent.
Si vous écrivez "width : 40% " cela signifie que votre élément aura pour largeur 40% de la largeur de l'élément parent
(et non pas de la fenêtre).
Exemple de page web :
Le code CSS et HTML correspondant :
Donc un élément IMG est enfant de MAIN et une autre image est enfant de DIV qui lui même est enfant de MAIN.
Dans la feuille de style de cette page web j'utilise entre autres les unités de mesure nouvelles : rem, vh, vw.
MAIN est enfant de BODY.
Les éléments titres et les éléments DIV sont enfants de MAIN.
body {width :100vw ;font-size : 20px;}
main {width : 90vw; margin : 2vh auto; background : lavender; font-size : 1.5rem}
p {text-align :justify; font-size : 1rem; padding : 0.5em}
h1 {font-size : 2rem ; margin : 1wh 0 ; padding : 0.5em ;
text-align : center ; background : navy; color : white;}
h2 {font-size : 1.5rem ; margin : 1wh 0; padding : 0.5em;
text-align :center ; background : azure;}
h3 {font-size : 1.2rem ;margin : 1wh 0; padding : 0.5em ;
text-align :center ; font-weight : bold ; background : white;}
.boite {display :inline-block; width : 44%; height: 30vh ; border : 1px solid black ;
margin :2vh 2vw; vertical-align : top; overflow : auto;}
Notez que pour les éléments BODY & MAIN les largeurs sont exprimées avec l'unité de mesure vw (viewport width).
Les marges externes verticales (haut et bas) des titres sont exprimés en vh ainsi que la hauteur des boites affectées
de la classe "boite" (30vh).
Les marges internes des titres et les marges des paragraphes sont exprimées avec l'unité de mesure em.
Les tailles de polices des titres et des paragraphes sont exprimés en rem donc par rapport à 20px (taille de police
de l'élément racine).
Remarque : L'élément racine a par défaut une taille standard qui est définie dans les navigateurs (16px en général).
Dans la feuille de style et pour les propriétés font-size de toutes les règles, remplacez "rem" par "em".
Puis lancez un navigateur ...
Conséquences : la taille des titres et des corps de texte est énorme : effet multiplicateur.
L’unité fr est seulement disponible avec l'outil "Grid Layout".
Retenez "fr" comme fraction. C’est une unité relative qui repose sur une fraction de l’espace disponible.
Pour en savoir davantage sur le posionnement en grille et sur l'unité
de mesure fr