Les unités de mesure en CSS : px, rem ou em

unite_mesure

Il existe de nombreuses mesures pour la définition de la taille des « font » d’une page web : in, cm, pt, pc, mm… Dans cet article, nous n’allons aborder que les 3 unités les plus utilisés qui sont px, em et rem.

L’unité de mesure « px »

Comme vous le savez, un écran d’ordinateur est constitué par d’innombrables petits carrés.Les nombres de ces derniers constituent la résolution du device tel qu’il soit : écran d’une tablette, d’un ordinateur ou d’un Smartphone. Le pixel représente une unité de mesure absolue. De ce fait, 1px en unité de mesure équivaut à 1px sur l’écran. L’un des principaux avantages du pixel est que celui-ci ne varie pas et peut être utilisé facilement pour la définition de la taille des différentes polices.

Cependant, avec le tout responsive, cela va poser certains problèmes puisque l’agrandissement et la réduction de la taille des font devront se faire manuellement. En effet, toutes les valeurs devront être redéfinies ce qui constitue une grande perte de temps non négligeable.

Les unités de mesure « em » et « % »

Il va bien falloir prendre des unités de mesures relatives comme « em » et « % » étant donné que ces 2 unités sont des unités relatives permettant la définition de la taille de la police par rapport à la taille du parent.

Le parent de tous les éléments du DOM étant body, il est nécessaire de définir une font-size de 14px qui sera proportionnelle si on veut disposer d’un h1 à 28px. On va alors lui attribuer 2em .

Taille élément en Em = taille élément en px / taille body

A partir de là, il sera désormais possible de redimensionner les éléments automatiquement en se basant sur la taille de la police défini sur body.

Toutefois, dans le cas d’éléments imbriqués, l’ « em » peut poser problème :

L’ « em », étant absolument relatif au parent, il n’est nécessaire d’effectuer la modification de la taille de la police du parent pour que l’élément change de taille. Cependant, ce n’est toujours pas l’effet escompté.

L’unité de mesure « rem »

Agissant comme l’ « em », le « rem » résout parfaitement le précédent problème qu’est l’héritage : rem = root em. Celui-ci se base sur l’élément racine contrairement à l’ « em » qui se base sur l’élément parent. Par conséquent, 1rem prendra sa valeur de la font-size du document : html ou body. Cela permettra d’avoir un comportement qui sera beaucoup plus prévisible que l’ « em ».

Toutefois, le « rem » n’est pas compatible ni supporté par IE8 ainsi qu’Opera Mini. Il faut donc prévoir un fallback en em ou en px.

Répondre