Flexible Math — Convertir des pixels en pourcentages

Le meilleur moyen pour rendre son site internet responsive consiste à utiliser des valeurs en pourcentage, tandis que le meilleur moyen de mettre en place une maquette, passe souvent par les pixels. Pour mettre tout le monde d’accord, il existe un mode de calcul aussi simple qu’efficace pour passer des pixels aux pourcentages : cible ÷ contexte = résultat. En d’autres termes, on prend la valeur de la cible en pixel, on la divise par le contexte (la valeur en pixel de l’élément parent) pour obtenir un ratio qu’il suffira de multiplier par 100 pour avoir les précieux pourcentages.

Flexible Math : l'ami du responsive
Flexible Math : l’ami du responsive

C’est merveilleux, mais un peu fastidieux, surtout lorsque l’imbrication des éléments fait passer Inception pour un jeu d’enfant. C’est là que Flexible Math intervient : renseignez la valeur en pixel de votre contexte et de vos cibles (jusqu’à six cibles disponibles) et le résultat en pourcentage apparait juste à côté.

Cerise sur la cacahuète : les règles CSS sont prêtes à rejoindre votre presse-papier.