Introduction video
Principes généraux
Réaliser une maquette en responsive Design
Maitriser l'intégration en Responsive Design
Le travail des textes
Intégrer des images optimisées
Une réalisation complète
Connaissances complémentaires
Conclusion
Détails de la leçon
Description de la leçon
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.
Objectifs de cette leçon
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.
Prérequis pour cette leçon
Pour suivre cette vidéo, vous devez comprendre les bases de CSS, en particulier les concepts de taille de police, marges et unités de mesure en CSS comme les pixels (px).
Métiers concernés
Les compétences enseignées ici s'appliquent aux métiers de développeur front-end, de designer web et de spécialiste en UX/UI design, où une conception réactive améliore l'expérience utilisateur sur tous les dispositifs.
Alternatives et ressources
Alternatives aux unités EEM comprennent les unités REM (root em) pour baser les tailles sur la racine HTML, ou encore les unités % pour les éléments flexibles et VH/VW (viewport height/width) pour adapter les éléments selon la taille de l'écran.
Questions & Réponses
Je m'abonne