Conversion des Unités PX en EEM
Objectifs
Les objectifs de cette vidéo sont les suivants :
- Comprendre l'importance des unités EEM en Responsive Web Design.
- Savoir convertir des valeurs en pixels en unités EEM.
- Apprendre à appliquer ces connaissances pour ajuster les tailles de police, marges et hauteurs des éléments CSS.
Résumé
Découvrez comment travailler avec l'unité EEM pour ajuster la taille des textes et des éléments en Responsive Web Design.
Description
Dans cette leçon, nous abordons l'utilisation des unités EEM, cruciales pour le Responsive Web Design. Vous apprendrez à convertir des tailles en pixels (px) en unités relatives EEM. Il est essentiel de comprendre que 1 EEM équivaut à la taille de la police par défaut, généralement 16 pixels. En convertissant des valeurs de pixels en EEM, nous assurons une meilleure adaptabilité des éléments UI aux différentes tailles d'écran.
Notre exemple pratique montre la conversion des pixels pour différents styles CSS, notamment la taille de la police, les marges et la hauteur des éléments. Cela inclut la conversion d'un font-size de 14 pixels en 0,875 EEM et d'une margin-top de 15 pixels en 0,9375 EEM. De plus, vous verrez comment ajuster la hauteur d'un label à partir de pixels en unités EEM. Enfin, nous démontrons l'utilisation des outils de développement de Chrome pour vérifier nos modifications en temps réel.
En adoptant les unités EEM, vous vous affranchissez des tailles fixes, améliorant ainsi la réactivité de votre design à travers divers dispositifs.
Questions - réponses
Programme détaillé
Module 1 - Introduction video
Module 2 - Principes généraux
Module 3 - Réaliser une maquette en responsive Design
Module 4 - Maitriser l'intégration en Responsive Design
Module 5 - Le travail des textes
Module 6 - Intégrer des images optimisées
Module 7 - Une réalisation complète
Module 8 - Connaissances complémentaires
Module 9 - Conclusion
