Le viewport et les dimensions fluides

Une interface responsive adapte sa disposition à l’espace disponible en conservant ses informations et ses actions. Dans le head du document, le viewport demande au navigateur mobile une largeur de mise en page correspondant à l’appareil :

<meta name="viewport" content="width=device-width, initial-scale=1">

Une largeur fixe de 1100 px peut déborder d’une fenêtre étroite. Une largeur fluide limitée par max-width s’adapte. Les images doivent aussi rester limitées à leur conteneur ; leur hauteur automatique préserve les proportions.

<article><h2>Atelier photo</h2><img src="/images/learning/landscape.svg" alt="Paysage stylisé avec soleil et montagnes"></article>
<style>
  article { box-sizing: border-box; width: 100%; max-width: 360px; margin-inline: auto; padding: 16px; border: 2px solid #1d4ed8; }
  h2 { margin-top: 0; }
  img { display: block; max-width: 100%; height: auto; max-height: 120px; }
</style>

Le conteneur peut rétrécir et l’image ne lui impose pas sa largeur naturelle. Ne désactivez pas le zoom et ne masquez pas un débordement avant d’en trouver la cause : le texte ou le focus risqueraient d’être coupés.

Media queries et approche mobile-first

La base mobile-first définit une disposition étroite sans condition, puis ajoute des possibilités avec min-width. Le seuil est inclus : min-width: 700px est vrai à 700 px. Les règles de base restent actives pour les propriétés non remplacées.

<div class="projets"><article>Photo</article><article>Vidéo</article><article>Affiche</article></div>
<style>
  .projets { display: grid; grid-template-columns: 1fr; gap: 16px; }
  article { padding: 16px; background: #dbeafe; overflow-wrap: anywhere; }
  @media (min-width: 700px) { .projets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .projets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>

À importance, origine, couche et spécificité égales, la dernière règle applicable gagne pour une même propriété. À 1000 px, les deux conditions sont vraies : l’ordre des règles explique les trois colonnes. Le seuil ne reconnaît pas une marque de téléphone ; choisissez-le selon les besoins du contenu.

Navigation et contenus longs

<nav aria-label="Navigation"><a href="#a">Présentation</a><a href="#b">Réalisations</a><a href="#c">Contact</a></nav>
<p id="a">Présentation du site</p><p id="b">Liste des projets</p><p id="c">Coordonnées</p>
<style>
  nav { display: flex; flex-wrap: wrap; gap: 16px; }
  a { padding: 8px; background: #dbeafe; }
  :focus-visible { outline: 3px solid #be123c; outline-offset: 3px; }
</style>

flex-wrap: wrap adapte la navigation sans masquer les liens. Un menu uniquement au survol ne couvre pas le tactile et le clavier. Le menu repliable sera étudié au S2 avec son état, son bouton et la fermeture par Échap ; il n’est pas nécessaire pour rendre cette navigation utilisable.

Un mot sans espace peut imposer une largeur minimale. overflow-wrap: anywhere permet une coupure adaptée ; min-width: 0 peut être nécessaire sur un enfant flex. Pour Grid, minmax(0, 1fr) limite l’influence du minimum intrinsèque. Ces propriétés répondent à des causes distinctes : inspectez l’élément qui déborde.

Vérifier les seuils et le zoom

Vérifiez juste avant le seuil, au seuil et juste après, puis à une largeur intermédiaire. Dans cet exemple : 699, 700 et 701 px. Complétez par un zoom à 200 pour cent, un titre long et une navigation au clavier. Le résultat attendu conserve tous les contenus et les contrôles accessibles, même si le nombre de colonnes change. Dans un aperçu, les media queries utilisent la largeur de l’iframe.