CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Maîtriser les Media Queries pour Mode Portrait et Paysage

Retour à la formation
Chapitre 4 Leçon 2
Précédent
Suivant

Cette leçon explique comment utiliser les Media Queries pour adapter l'affichage en fonction de la position de l'appareil, que ce soit en mode portrait ou paysage.

Détails de la leçon

Description de la leçon

La leçon aborde l'utilisation des Media Queries pour gérer les affichages selon l'orientation des appareils mobiles. Elle montre comment différencier la mise en forme d'un contenu lorsque l'appareil est tenu verticalement (portrait) ou horizontalement (paysage). En illustrant ce concept à travers une page exemple, elle permet de visualiser une image en mode portrait et un texte explicatif en mode paysage.

Le tutoriel commence par une présentation de la structure HTML de la page, qui comprend un logo, un menu, une image et une zone de texte. Ensuite, il détaille comment manipuler les CSS pour masquer ou afficher certaines sections en fonction de l'orientation. Par exemple, la zone de texte est masquée en mode portrait et affichée en mode paysage, tandis que le logo, le menu et l'image suivent le comportement inverse.

Les Media Queries utilisées dans cet exemple démontrent leur capacité à enrichir l'expérience utilisateur sur smartphone, en fournissant des mises en page adaptées et en évitant d'alourdir inutilement le contenu affiché.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de:

  • Comprendre le fonctionnement des Media Queries
  • Apprendre à adapter l'affichage selon l'orientation de l'appareil
  • Améliorer l'expérience utilisateur sur smartphones et tablettes

Prérequis pour cette leçon

Les prérequis incluent:

  • Des connaissances de base en HTML et CSS
  • Une compréhension des concepts de design responsive

Métiers concernés

Les métiers concernés par ce sujet incluent:

  • Développeurs front-end
  • Concepteurs UI/UX
  • Intégrateurs web

Alternatives et ressources

Les solutions alternatives pour gérer les adaptabilités d'affichage comprennent:

  • Frameworks CSS comme Bootstrap ou Foundation
  • Techniques JavaScript pour la détection de l'orientation

Questions & Réponses

En mode portrait, la zone de texte est masquée pour ne montrer que le logo, le menu et l'image.
L'utilisation de Media Queries permet d'éviter d'alourdir inutilement la page sur l'un des deux écrans (portrait ou paysage).
L'intérêt principal est d'enrichir l'expérience utilisateur en affichant des contenus adaptés à l'orientation de l'appareil, améliorant ainsi l'ergonomie et la réactivité du site.