Px contre Em contre Rem: Quelle unité CSS devez-vous utiliser ?

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; donc, ci-dessous est une explication détaillée de ces unités.

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

Longueurs absolues

Les unités de longueur absolues 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. Cependant, ils peuvent être utilisés si le support de sortie est connu, comme pour une mise en page imprimée.

Longueurs relatives

Les unités de longueur relative spécifient une longueur relative à une autre propriété de longueur. Les unités de longueur relative évoluent mieux entre 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/96e de pouce dans les médias imprimés.

Sur les écrans d'ordinateur, cependant, ils ne sont généralement pas liés à des mesures réelles comme 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, ce que l'on appelle la 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 à faire en sorte que les choses se ressemblent sur des é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 (1px) 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: -

<classe div="récipient">
<div>
<h1>Ceci est un paragraphe</h1>
<p>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis à! 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>

.récipient {
 largeur: 100 % ;
 hauteur: 100vh ;
 affichage: flexible ;
 justifier-contenu: centrer ;
 align-items: center ;
}
.récipientdiv {
 largeur maximale: 500 px ;
 rembourrage: 5px 20px ;
 bordure: 1 pixel gris uni ;
 rayon de bordure: 10 px ;
}
p {
 taille de police: 16 px ;
}

sortir

La case supérieure indique à quoi elle ressemble lorsqu'elle est affichée sur un écran plus grand comme un ordinateur portable, et la case inférieure indique à quoi elle ressemble lorsqu'il est affiché sur un écran plus petit, comme un téléphone.

Remarquez comment le texte dans les deux cases est de la même taille, c'est essentiellement ainsi que fonctionne le pixel. Cela aide le contenu Web (pas seulement le texte) à 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 la police d'un élément en fonction de la taille de la 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 cette div et que vous lui attribuez une taille de police de 1 em, 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. Considérez l'exemple ci-dessous :

<classe div="div-un">
<p classe="un-em">1 em basé sur 10px</p>
<p classe="deux em">2 em basé sur 10px</p>
</div>
<classe div="div-deux">
<p classe="un-em">1 em basé sur 10px</p>
<p classe="deux em">2 em basé sur 10px</p>
</div>
</div>

.div-un {
 taille de police: 15 px ;
}
.div-deux {
 taille de police: 20 px ;
}
.one-em {
 taille de la police: 1 em ;
}
.deux-em {
 taille de police: 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 les pages structurées complexes.

S'il n'est pas utilisé correctement, vous pouvez rencontrer des problèmes de mise à l'échelle où les éléments peuvent 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 ne fait référence qu'à la taille de police de l'élément racine sur 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 16px, donc 1rem sera de 16px et 2rem sera de 32px. Cependant, dans un cas où la racine font-size est changée en 10px par exemple; 1rem sera de 10px et 2rem sera de 20px.

Voici un exemple pour clarifier les choses :

<classe div="div-un">
<!-- EM -->
<p classe="un-em">1 em basé sur le conteneur (40px)</p>
<p classe="deux em">2 em basé sur le conteneur (40px)</p>
<!-- REM -->
<p classe="un-rem">1 rem basé sur la racine (16px)</p>
<p classe="deux-rem">2 rem basé sur la racine (16px)</p>
</div>

.div-un {
 taille de police: 40 px ;
}
.one-em {
 taille de la police: 1 em ;
}
.deux-em {
 taille de police: 2em ;
}
.one-rem {
 taille de police: 1rem ;
}
.deux-rem {
 taille de police: 2 rem ;
}

sortir

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

Px contre Em contre 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 ponctuelles de votre contenu dicteront l'apparence de votre site Web, mais vous devrez faire preuve de créativité.