Unités de longueur relatives.

em.

L'unité 'em' désigne la taille de la police de caractères. Par contre utilisé avec des éléments comme 'padding' ou 'margin', ces tailles deviennent relatives à la taille de la police et deviendront proportionnelles à cette dernière. Dans l'idéal, il ne faurdrait pas spécifier la taille de la police par défaut dans l'élément 'body', mais d'utiliser la taille par défaut du support. Et exprimer la taille des autres éléments en 'em'. Par exemple définir le titre 'h1' à '3em' signifira afficher le titre trois fois plus grand que le texte contenu dans le corps du document. La taille d'un 'em' dépend de son parent !

Par défaut, 1em = 16px si aucune taille de police n'a été définie.

Comme il est préférable d'utiliser la taille de texte par défaut du navigateur et de ne pas imposer une valeur minimale qui pourrait rendre le texte illisible, on détermine une valeur globale sur l'élémént 'body' qui sera proportionnelle à la taille du texte par défaut comme suit:

html {font-size: 100%;} /* pour IE qui se mélange les pinceaux */
body {font-size: 0.7em;} /* soit 70% de la taille par défaut */
									

Un peu de maths.

Comme dit précédement, les unités en 'em' héritent de leurs parents donc attention aux effets de cascade ! Commençons par la base. Si j'ai définie une valeur à font-size dans l'élémént HTML, voyons comment sa valeur en 'em' sera calculée pour un élément descendant:

html {
    font-size: 16px;
}
p {
    font-size: 1.5em; // 16*1.5 = 24px
}
									

Et maintenant l'effet cascade:

body {
  font-size: 16px;
}
div {
  font-size: 1.2em;
}

<body>
    <div>
        texte /* 16*1.2 = 19.2px */
        <div>
            texte /* 19.2*1.2 = 23.04px */
            <div>
                texte /* 23.04*1.2 = 27.64px*/
            </div>
        </div>
    </div>
</body>
									

Attention ! On voit souvent ce genre d'exemple (exemple que j'ai moi-même repris...) mais ce n'est pas à faire ! Si on fait référence à un élément root, c'est l'unité 'rem' qui doit être employée et non 'em' !

rem.

Cette unité représente la taille initiale de la police si elle est définie dans l'élément racine 'HTLM'. Certains conseillent d'utiliser la valeur 'rem' pour les remplissages, les marges des éléments qui joint aux requettes média pour définir la valeur de base de la police, permet d'obtenir une interface évoluant avec le terminal utilisé. Voir exemple si dessous (code d'Adrian Sandu):

html {
  font-size: 62.5%;
  font-family: Arial, sans-serif;
  
  @media(min-width: 400px) {
    font-size: 100%;
  }
  @media(min-width: 800px) {
    font-size: 150%;
  }
}

.well {
  background: #efefef;
  margin: 2rem auto;
  padding: 1rem;
  max-width: 20rem;
}

h1 { margin: 0 0 2rem; font-size: 1.5rem; }
p { margin: 0 0 1rem; }
button { padding: 0.5rem 1rem; }

.p {
  font-size: .5rem;
  text-align: center;
}


									

Unités de longueur relatives liées au viewport.

Le viewport.

C'est la fenêtre d'affichage du navigateur. Sa taille est définie une fois les bordures, les barres de défilements et autres éléments de l'écran enlevés. Si la fenêtre de mon navigateur fait 45cm, alors 1vw = 0.45cm. Par exemple, pour afficher une boite dont les dimensions resteront proportionnelles quelque soit le terminal :

.boite {
width: 50vw; /* soit 50% de la fenêtre d'affichage */
height: 20vh; /* soit 20% de la fenêtre d'affichage */
}	
									

vh.

Permet de spécifier des tailles relative à la fenêtre du terminal où vh équivaut à1/100e de sa hauteur.

vw.

Permet de spécifier des tailles relative à la fenêtre du terminal où vh équivaut à1/100e de sa largeur.

vmin.

Sélectionne la plus petite valeur entre 'vw' et 'vh' soit 1/100e du côté le plus petit du viewport.

vmax.

Sélectionne la plus grande valeur entre 'vw' et 'vh' soit 1/100e du côté le plus grand du viewport.

Dans le cas d'une taille de police:

h1 {
font-size: 10vw;
}	
									

Définie de cette manière, le titre 'h1' vaut 10% de la largeur de la fenêtre, quelque soit sa taille. Donc pour une fenêtre de 1200px, la taille de la police sera de 120px.


Point de vue.

Chris Coyier dans un article de 2015 nous fait part d'un point de vue intéressant: "px pour le Root, rem pour les Composants, em pour les éléments de texte." Voici donc sa proposition:

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}	
									

Unités absolues.

px.

L'unité 'px' dépend du terminal utilisé et n'est pas définie comme une valeur constante. Si un élément, comme une ligne par exemple, est définie à '1px', elle sera affichée petite et nette. Mais sa largeur apparente pourra être différente suivant un affichage sur un écran pc ou bien un écran de smartphone haute densité de pixels.


Un apperçu des unités chez Android.

dp.

Density independen Pixel ( Densité de pixels indépendant). Cette unité se base sur la densité physique de l'écran et elle a pouir valeur 160 DPI par écran. Cette unité est utilisée pour la mise enpage des éléments.

sp.

Scale independent Pixel (Echelle de pixels indépendant). Cette unité est utilisée pour la taille des polices comme l'em pour le web.

pt.

C'est le point, soit 72pt par pouce, basée sur la taille physique de l'écran.

px.

C'est le pixel, correspondant aux pixels réel de l'écran. Peu recommandée car la densité de pixels peut varier d'un terminal à un autre.


Articles connexes:

viewport et viewbox (SVG).[ GO! ]

Font et responsiv (en cours).[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/11/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11