From pixel to rem

Une masterclass par Victor Brito pendant la formation développeur web et web mobile à la Wild Code School (promotion remote février 2023)

Mise en situation

Logo Figma Logo Sketch Logo Adobe XD

De nouvelles icônes qui vous veulent du bien

De belles maquettes à traduire en HTML / CSS / JavaScript

Exemple de maquettes Figma pour mobile Exemple de maquettes Figma pour desktop

Grilles rougeâtres non contractuelles

Le brief de l’agence / des chefs de projet / du lead developer / des graphistes / du N + 1 / du client final (rayer les mentions inutiles)

Pixel perfect

Pixel perfect in love with job offers

Extrait d’offre d’emploi évoquant le pixel perfect Extrait d’offre d’emploi évoquant le pixel perfect Extrait d’offre d’emploi évoquant le pixel perfect Extrait d’offre d’emploi évoquant le pixel perfect

Pixel perfect in love with job offers

Extrait d’offre d’emploi évoquant le pixel perfect Extrait d’offre d’emploi évoquant le pixel perfect Extrait d’offre d’emploi évoquant le pixel perfect Extrait d’offre d’emploi évoquant le pixel perfect

Solutions

La solution de facilité

Tout en pixels

Inconvénients

  • px = unité absolue
  • Pas top pour les tailles de police
  • Les blocs en pixels ne s’agrandissent pas en cas de zoom texte

Utilisation de l’unité rem

Cette unité représente la font-size de l’élément racine (par exemple la taille de la police de l’élément <html>).

Difficultés

  • Taille de police de l’élément racine définie à 16 pixels par défaut
  • Comment calculer ? Affichage des styles d’un calque texte dans Figma, avec la légende demandant combien font 18 pixels en rem

Comment calculer ?

  • Calculatrice scientifique de macOS
  • 									
.element {
  font-size: calc(18rem / 16);
}

Le rem sans peine

  • Définir la taille de police de l’élément racine à 10 pixels
  • 									
/* ❌ Bad */
html {
  font-size: 10px;
}
									
								
  • 									
/* ✅ Good */
html {
  font-size: 62.5%;
}
  • 10 / 16 = 0,625 (d’où les 62,5 %)

Avantages

  • 1 rem = 10 pixels
  • Diviser par 10 est à portée de main
  • Très pratique pour un design totalement élastique

Merci

Des questions ?

Crédits