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)
Lien vers les slides
https://webdevbynight.github.io/wcs-remote-fr-feb-2023-from-pixel-to-rem/
Mise en situation
De nouvelles icônes qui vous veulent du bien
De belles maquettes à traduire en HTML / CSS / JavaScript
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
Pixel perfect in love with job offers
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-sizede 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 ?
Comment calculer ?
-
.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
- https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg (domaine public)
- https://upload.wikimedia.org/wikipedia/commons/5/59/Sketch_Logo.svg (domaine public)
- https://upload.wikimedia.org/wikipedia/commons/c/c2/Adobe_XD_CC_icon.svg (domaine public)
- https://www.figma.com/community/file/767127152320102433"> (CC BY 4.0)
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)