Tout le monde connait les unités de mesure traditionnelles dans nos fichiers CSS:

• px: taille de l’élément fixée en pixels.
• em: taille de l’élément fixée par rapport à celle de son élément parent.

Voici l’unité REM, une solution alternative qui propose une solution élégante à ces problématiques.

Tout le monde connait les unités de mesure traditionnelles dans nos fichiers CSS:

• px: taille de l’élément fixée en pixels.
• em: taille de l’élément fixée par rapport à celle de son élément parent.

Voici l’unité REM, une solution alternative qui propose une solution élégante à ces problématiques.

Les tailles de police en « em » sont souvent difficiles à mettre en place et à modifier à cause de leur relativité.

Exemple:

parent enfant

p {
	font-size: 1em;
}
span {
	font-size: 2em;
}

Ici, la taille de l’élément enfant () est égale à 2 fois celle de son parent (

).

Les problèmes arrivent lorsqu’on doit modifier une taille de police pour un élément précis, tous les éléments enfants se trouvent affecté par ce changement.

C’est là qu’arrive notre sauveur, l’unité REM (root em) !

Le principe

Cette unité encore peu utilisée est relative au tout premier élément d’une page web, la balise (root).

En mettant tout simplement dans votre CSS:

html {
	font-size: 100%;
}

Tous vos éléments utilisant l’unité de mesure REM, auront une taille relative à cette taille (100% dans le cas présent).

La technique

La magie de cette merveille technologique intervient quand on s’attaque à des projets « responsive » et sur des clients mobile plus précisément.

Qui ne s’est jamais cassé les dents en essayant d’adapter ses feuilles de styles pour des tailles d’écrans complètements différentes? Et en ajustant toutes les tailles à l’intérieur des Media Queries ?

Grace aux REM, il suffit d’une ligne par Media Queries!

Exemple pour ajuster le style sur un iPad Retina:

@media (min-width: 1025px) {
  html {
  	font-size: 200%;
  }
}

Et voilà, votre site s’affichera à 200% de sa taille d’origine sur un iPad Retina!!

Pour utiliser cette technique, il faut bien comprendre que TOUTES les tailles doivent être précisées en REM (width, height, margin, padding, top, background-size etc..) et pas seulement les tailles de typo. On peut quand même exclure les tailles en pourcentage, qui s’adapteront dans tous les cas.

En pratique

A quoi correspond 1rem ?

Il faut savoir que la propriété « font-size: 100% » sur la balise , permet de récupérer la taille par défaut du navigateur.
Dans le cas de webkit, la taille de police par défaut est de 16 pixels, on peut donc en déduire que 1rem = 16 px, 2rem = 32px, etc.
Pour faciliter la mise en place des rem, on utilise une technique déjà connue pour les habitués de l’unité « em »:

html {
	font-size: 62.5%;
}

Dans le cas de webkit, ce pourcentage équivaut à 10px (62.5% de 16px). Grâce à cette astuce, on pourra désormais spécifier plus clairement nos unités rem:

• 1rem = 10px
• 1.5rem = 15px
• 102.4rem = 1024px

Compatibilité

Cette unité est compatible avec tous les navigateurs « récents » et plus précisément ie9+ alors ne vous privez plus !

Les tailles de police en « em » sont souvent difficiles à mettre en place et à modifier à cause de leur relativité.

Exemple:

	parent
	enfant

p {
	font-size: 1em;
}
span {
	font-size: 2em;
}

Ici, la taille de l’élément enfant () est égale à 2 fois celle de son parent (

).

Les problèmes arrivent lorsqu’on doit modifier une taille de police pour un élément précis, tous les éléments enfants se trouvent affecté par ce changement.

C’est là qu’arrive notre sauveur, l’unité REM (root em) !

Le principe

Cette unité encore peu utilisée est relative au tout premier élément d’une page web, la balise (root).

En mettant tout simplement dans votre CSS:

html {
	font-size: 100%;
}

Tous vos éléments utilisant l’unité de mesure REM, auront une taille relative à cette taille (100% dans le cas présent).

La technique

La magie de cette merveille technologique intervient quand on s’attaque à des projets « responsive » et sur des clients mobile plus précisément.

Qui ne s’est jamais cassé les dents en essayant d’adapter ses feuilles de styles pour des tailles d’écrans complètements différentes? Et en ajustant toutes les tailles à l’intérieur des Media Queries ?

Grace aux REM, il suffit d’une ligne par Media Queries!

Exemple pour ajuster le style sur un iPad Retina:

@media (min-width: 1025px) {
  html {
  	font-size: 200%;
  }
}

Et voilà, votre site s’affichera à 200% de sa taille d’origine sur un iPad Retina!!

Pour utiliser cette technique, il faut bien comprendre que TOUTES les tailles doivent être précisées en REM (width, height, margin, padding, top, background-size etc..) et pas seulement les tailles de typo. On peut quand même exclure les tailles en pourcentage, qui s’adapteront dans tous les cas.

En pratique

A quoi correspond 1rem ?

Il faut savoir que la propriété « font-size: 100% » sur la balise , permet de récupérer la taille par défaut du navigateur.
Dans le cas de webkit, la taille de police par défaut est de 16 pixels, on peut donc en déduire que 1rem = 16 px, 2rem = 32px, etc.
Pour faciliter la mise en place des rem, on utilise une technique déjà connue pour les habitués de l’unité « em »:

html {
	font-size: 62.5%;
}

Dans le cas de webkit, ce pourcentage équivaut à 10px (62.5% de 16px). Grâce à cette astuce, on pourra désormais spécifier plus clairement nos unités rem:

• 1rem = 10px
• 1.5rem = 15px
• 102.4rem = 1024px

Compatibilité

Cette unité est compatible avec tous les navigateurs « récents » et plus précisément ie9+ alors ne vous privez plus !