Px vs Em vs Rem : quelle unité CSS devriez-vous utiliser ?

Si vous développez la conception d'un site Web, il est important d'être cohérent avec vos unités CSS. Mais devriez-vous utiliser px, em ou rem ?

Vous allez apprendre quelques unités CSS pour personnaliser la taille de la police du texte lors de la création de pages Web. Il existe de nombreuses unités telles que pt, pc, ex, etc., mais dans la plupart des cas, vous devez vous concentrer sur les trois unités les plus populaires : px, em et rem. De nombreux développeurs ne comprennent généralement pas quelles sont les différences entre ces unités ; vous trouverez donc ci-dessous une explication détaillée de ces unités.

Avant de continuer, notez qu'il existe deux types d'unités de longueur : absolue et relative.

Longueurs absolues

Les unités de longueur absolue sont fixes et une longueur exprimée dans l'une d'entre elles apparaîtra exactement comme cette taille.

Les unités de longueur absolue ne sont pas recommandées pour une utilisation à l'écran, car les tailles d'écran varient énormément. Toutefois, ils peuvent être utilisés si le support de sortie est connu, par exemple pour une mise en page imprimée.

cm

centimètres

mm

millimètres

in

pouces (1 po=96 px=2,54 cm)

px *

pixels (1px=1/96ème de 1 pouce)

pt

points (1pt=1/72 de 1in)

pc

picas (1pc=12 pts)

Longueurs relatives

Les unités de longueur relative spécifient une longueur par rapport à une autre propriété de longueur. Les unités de longueur relative s'adaptent mieux entre les différents supports de rendu.

1.Px (Pixel)

Le pixel est probablement l'unité la plus utilisée en CSS et est très populaire lorsqu'il s'agit de définir la taille de la police du texte sur les pages Web. Un pixel (1px) est défini comme 1/96ème de pouce dans les médias imprimés.

Cependant, sur les écrans d’ordinateur, elles ne sont généralement pas liées à des mesures réelles telles que les centimètres et les pouces, comme vous pourriez le penser ; ils sont simplement définis comme étant petits mais visibles. Ce qui est considéré comme visible dépend de l'appareil.

Différents appareils ont un nombre différent de pixels par pouce sur leurs écrans, appelé densité de pixels. Si vous utilisiez le nombre de pixels physiques sur l'écran d'un appareil pour déterminer la taille du contenu sur cet appareil, vous auriez du mal à rendre les choses identiques sur les écrans de toutes tailles.

C'est là que le ratio de pixels de l'appareil entre en jeu. Il s'agit essentiellement d'un moyen de calculer l'espace qu'un pixel CSS (1 px) occupera sur l'écran de l'appareil, ce qui lui permettra d'avoir la même taille par rapport à un autre appareil.

Ci-dessous un exemple : -

<div class="container">
     <div>
       <h1>This is a paragraph</h1>
       <p>
         Lorem ipsum, dolor sit amet consectetur adipisicing elit.
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
         omnis at! Officiis praesentium officia, nemo veniam consequatur
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem
         vel ullam aut, quod corporis ratione atque ducimus dolorum.
       </p>
     </div>
   </div>

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container div {
  max-width: 500px;
  padding: 5px 20px;
  border: 1px grey solid;
  border-radius: 10px;
}
p {
  font-size: 16px;
}

sortir

La case du haut indique à quoi il ressemble lorsqu'il est affiché sur un écran plus grand, comme un ordinateur portable, et la case du bas, à quoi il ressemble lorsqu'il est affiché sur un écran plus petit, comme un téléphone.

Remarquez que le texte dans les deux cases a la même taille. C'est essentiellement ainsi que fonctionne le pixel. Cela permet au contenu Web (pas seulement au texte) d'avoir la même taille sur tous les appareils.

2. Em (M)

L'unité em tire son nom de la lettre majuscule « M » (em), car la plupart des unités CSS proviennent de la typographie. Il utilise la taille de police actuelle de l'élément parent comme base. Il peut être utilisé pour augmenter ou réduire la taille de police d'un élément en fonction de la taille de police héritée du parent.

Disons que vous avez un div parent qui a une taille de police de 16 pixels. Si vous créez un élément de paragraphe dans ce div et lui donnez une taille de police de 1em, la taille de police du paragraphe sera de 16 pixels.

Cependant, si vous donnez à un autre paragraphe la taille de police de 2em, cela se traduira par 32px. Prenons l'exemple ci-dessous :

   <div class="div-one">
      <p class="one-em">1 em based on 10px</p>
      <p class="two-em">2 em based on 10px</p>
  </div>
    <div class="div-two">
     <p class="one-em">1 em based on 10px</p>
     <p class="two-em">2 em based on 10px</p>
    </div>
   </div>

.div-one {
  font-size: 15px;
}
.div-two {
  font-size: 20px;
}
.one-em {
  font-size: 1em;
}
.two-em {
  font-size: 2em;
}

sortir

Vous pouvez voir comment em peut augmenter la taille du texte et comment il est affecté par la taille de police actuelle héritée du conteneur parent. Il n'est pas conseillé de les utiliser, en particulier dans des pages structurées complexes.

S'il n'est pas utilisé correctement, vous risquez de rencontrer des problèmes de mise à l'échelle dans lesquels les éléments risquent de ne pas être dimensionnés correctement en fonction d'un héritage complexe de tailles dans l'arborescence DOM.

3. Rem (racine Em)

Rem fonctionne presque de la même manière que em, mais la principale différence est que rem fait uniquement référence à la taille de police de l'élément racine de la page plutôt qu'à la taille de police du parent. La taille de police racine est la taille de police par défaut spécifiée soit par l'utilisateur dans les paramètres de son navigateur, soit par vous, le développeur.

La taille de police par défaut d'un navigateur Web est généralement de 16 px, donc 1rem sera de 16 px et 2rem sera de 32 px. Cependant, dans le cas où la taille de police racine est modifiée en 10px par exemple ; 1rem fera 10px et 2rem fera 20px.

Voici un exemple pour que les choses soient plus claires :

   <div class="div-one">
     <!-- EM -->
     <p class="one-em">1 em based on container (40px)</p>
     <p class="two-em">2 em based on container (40px)</p>
     <!-- REM -->
     <p class="one-rem">1 rem based on root (16px)</p>
     <p class="two-rem">2 rem based on root (16px)</p>
   </div>

.div-one {
  font-size: 40px;
}
.one-em {
  font-size: 1em;
}
.two-em {
  font-size: 2em;
}
.one-rem {
  font-size: 1rem;
}
.two-rem {
  font-size: 2rem;
}

sortir

Comme vous pouvez le constater, les paragraphes définis avec les unités REM ne sont absolument pas perturbés par la taille de police déclarée dans notre conteneur et sont strictement rendus par rapport à la taille de police racine définie dans le sélecteur d'éléments HTML.

Px vs Em vs Rem : quelle unité est la meilleure ?

Em n'est pas recommandé en raison de la possibilité d'avoir une hiérarchie complexe d'éléments imbriqués. REM est généralement mis à l'échelle de manière appropriée avec la nouvelle taille de police par défaut/de base spécifiée dans les paramètres du navigateur, par opposition à PX. Cela explique pourquoi vous devriez utiliser REM lorsque vous travaillez avec du contenu textuel sur vos pages Web. REM remporte la course. Un meilleur style et une meilleure mise à l'échelle de votre contenu avec REM ajoutent du style à votre site car il est idéal pour les créateurs de sites Web. Des mesures précises de votre contenu dicteront l'apparence de votre site Web, mais vous devrez faire preuve de créativité.