Détails de la leçon
Description de la leçon
Dans cette vidéo, nous explorons trois actions cruciales pour rendre un site web plus responsive. La première action utilise l'événement Orientation Change sur l'objet Window pour détecter les changements d'orientation de l'écran. La deuxième action repose sur l'événement Resize pour adapter la mise en page lors du redimensionnement de la fenêtre. Enfin, la troisième action utilise l'événement Complete pour adapter l'affichage dès le chargement initial du document. Nous verrons comment cibler un champ de texte pour obtenir la largeur de la fenêtre et utiliser ces valeurs pour appliquer des conditions et gérer l'affichage en vertical ou horizontal. Cette méthodologie permet d'assurer une mise en page adaptée, quel que soit le contexte d'affichage.
Objectifs de cette leçon
Les objectifs de cette vidéo sont de comprendre comment :
1. Détecter les changements d'orientation de l'écran.
2. Adapter la mise en page lors du redimensionnement de la fenêtre.
3. Garantir un affichage adapté dès le chargement initial de la page.
Prérequis pour cette leçon
Pour suivre cette vidéo, vous devriez avoir des connaissances de base en HTML, CSS et JavaScript.
Métiers concernés
Les compétences acquises grâce à cette vidéo peuvent être appliquées dans les métiers de :
- Développeur Web
- Designer UX/UI
- Intégrateur Web
Alternatives et ressources
En plus des événements JavaScript natifs, des frameworks comme React et Vue.js offrent des solutions pour gérer les changements d'orientation et de taille de fenêtre.