Le scalable design est une technique permettant de créer des éléments flexibles. Grâce à cette méthode, il sera plus facile de concevoir des blocs réutilisables.

Dans cette méthode il est important de comprendre comment fonctionne les unités relatives : les em.

Contrairement aux unités en pixel, le em se calcule en fonction d’une taille de base. En générale celle-ci est la taille de la police définie par le navigateur des utilisateurs ou de la taille que vous aurez prédéfinie dans votre code. 

Prenons l’exemple d’un bouton. Vous pouvez le créer en pixel. Cependant si vous décidez d’en changer sa taille par la suite, il sera nécessaire d’ajuster les marges et la taille de la police pour qu’il garde sa proportion.

Grâce aux em il vous suffira de modifier une seule taille et tout se redimensionnera proportionnellement.

Testons sur le bouton :

See the Pen Scalable design by Annelyse (@annelyseNini) on CodePen.light

Vous pouvez remarquer que le bouton vert et jaune sont identiques cependant le premier est défini en pixel contrairement au deuxième qui lui est défini en em.

Nous souhaitons maintenant obtenir des boutons de tailles différentes, mais il est souhaitable de conserver les proportions. Pour ce faire, il vous suffit de convertir les unités en em et de définir une taille au container. Le container de votre bouton aura donc une taille permettant de calculer les autres.

Si nous définissons une taille de 10px au container il sera ensuite facile de convertir en em. Si vous souhaitez obtenir une taille de 10px il suffit de diviser votre taille par 10. Ainsi 10px sera équivalent à 1em. Une fois cette règle comprise, il est facile de convertir toutes les tailles. Vous pouvez également visiter le site pxtoem pour convertir des pixels en unité relative. 

Une fois les autres tailles converties en em, vous pouvez maintenant créer un bouton plus gros mais proportionnel. Pour ce faire modifié la taille en pixel du container et le tour est joué !