• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Frontend

Unité de mesure CSS : REM

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 !

31/01/2014 34 MIN READ BY: Mikael L'HARIDON 0 COMMENT
SHARE
LIRE LA SUITE

Mikael L'HARIDON

Diffuser un jeu sur Facebook grâce à la plateforme Playground

Inspecter un site sur Android depuis Chrome

VOUS POURRIEZ AIMER

Frontend Le WebGL, Dans quel but ?

Frontend Dépendances clients : NPM vs Bower

Framework Frontend Mobile Développer une application pour pebble Time

Display Frontend L'actualité AdFab Les grains de la veille #2 : React Native, PWA, Display…

Frontend Le responsive design et le SEO

Frontend Terrassez les bugs mobiles avec ngrok

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect