Attention ! Cet article a plus de 1 an (2967 jours), ce qui signifie qu'il n'est pas forcément à jour !
Il m’arrive constamment de recevoir des maquettes avec les polices en PX. Ceci est bien normal vous me direz, c’est effectivement le cas. Cependant, quand arrive le temps d’intégrer cela et de devoir les ajuster en EM, c’est beaucoup plus problématique.
Il existe plusieurs sites qui vous font la conversions. Ou tout au plus, on peut faire le calcul suivant : la taille en px diviser par notre taille de base et voilà le résultat. Mais avec l’aide de SASS j’ai fait une petite function qui me permet de sauver beaucoup de temps.
@function em($px, $base: $base-font-size) {
@return ($px / $base) * 1em;
}Cette function toute simple me permet d’avoir une variable $base-font-size qui va faire changer partout les PX enEM et les ajuster selon la taille de la police de base.
L’utilisation est des plus simple. On doit déclarer la variable et ensuite l’utiliser ainsi.
$base-font-size: 16px;
body {font-size:$base-font-size;}
h1 {font-size: em(48px);}