MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 511883 of Vue adaptative

  • Raccourci de la révision : Outils/Vue_adaptative
  • Titre de la révision : Vue adaptative
  • ID de la révision : 511883
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{fx_minversion_header("15.0")}}

La Vue adaptative permet de voir facilement le rendu de votre design sur des écrans de taille différente. Un design "responsive" s'adapte à différentes tailles d'écrans, afin que la présentation soit optimale sur tous les types d'appareils utilisés, tels que les smartphones ou les tablettes. La capture d'écran ci-dessous est un exemple du site mozilla.org, dans une zone visible de 320 par 480.

La Vue adaptative est utile pour pouvoir changer rapidement la taille de cette zone de contenu, sans avoir à redimensionner la fenêtre du navigateur. Cela peut en effet être gênant car tous les onglets sont alors redimensionnés, et cela laisse moins d'espace dans la fenêtre pour les outils de développement.

Activer la Vue adaptative

  • Dans le menu Outils, choisir Développeur Web, puis Vue adaptative.
  • Sur le clavier, faire le raccourci Ctrl+Maj+M sur Windows ou Linux, ou Cmd+Option+M sur Macintosh.

Désactiver la Vue adaptative

  • Dans le menu Outils, choisir Développeur Web, puis Vue adaptative.
  • Sur le clavier, appuyer sur Echap.

Lorsque la Vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone redimensionnée.

En haut de la Vue adaptative se trouve une liste déroulante de tailles prédéfinies, utiles pour avoir rapidement un aperçu du design dans les tailles d'écrans les plus répandues. Il y a également un bouton "rotation" qui permet d'inverser, en un clic, les valeurs de largeur et hauteur (action similaire à la rotation d'un smartphone ou d'une tablette).

Modifier les tailles prédéfinies

L'outil de Vue adaptative contient par défaut un certain nombre de tailles prédéfinies, pour des résolutions d'ordinateurs de bureau, tablettes et mobiles. Cependant, vous voudrez peut-être ajouter des résolutions personnalisées, pour de nouveaux appareils à la taille d'écran différente. La manipulation à effectuer est la suivante:

  1. Dans la liste déroulante, sélectionner l'option qui contient "(personnalisée)".
  2. Utiliser la poignée de redimensionnement en bas à droite de la zone de contenu pour changer la taille.
  3. Lorsque la taille désirée est atteinte, choisir "Ajouter la présélection" en bas de la liste déroulante des tailles.

 

Source de la révision

<div>
 {{fx_minversion_header("15.0")}}</div>
<p>La Vue adaptative permet de voir facilement le rendu de votre design sur des écrans de taille différente. Un<a href="/en-US/docs/Web_Development/Responsive_Web_design"> design "responsive"</a> s'adapte à différentes tailles d'écrans, afin que la présentation soit optimale sur tous les types d'appareils utilisés, tels que les smartphones ou les tablettes. La capture d'écran ci-dessous est un exemple du site <a href="http://mozilla.org" title="Localizing_extension_metadata_on_addons.mozilla.org">mozilla.org</a>, dans une zone visible de 320 par 480.</p>
<p><img alt="" src="/files/3877/Responsive%20Design%20View.png" style="width: 372px; height: 628px; float: left; padding-right: 2em;" /> La Vue adaptative est utile pour pouvoir changer rapidement la taille de cette zone de contenu, sans avoir à redimensionner la fenêtre du navigateur. Cela peut en effet être gênant car tous les onglets sont alors redimensionnés, et cela laisse moins d'espace dans la fenêtre pour les outils de développement.</p>
<div style="overflow:hidden">
 <h2 id="Enable_Responsive_Design_View" name="Enable_Responsive_Design_View">Activer la Vue adaptative</h2>
 <ul>
  <li>Dans le menu <strong>Outils</strong>, choisir<strong> Développeur Web</strong>, puis <strong>Vue adaptative</strong>.</li>
  <li>Sur le clavier, faire le raccourci Ctrl+Maj+M sur Windows ou Linux, ou Cmd+Option+M sur Macintosh.</li>
 </ul>
 <h2 id="Disable_Responsive_Design_View" name="Disable_Responsive_Design_View">Désactiver la Vue adaptative</h2>
 <ul>
  <li>Dans le menu <strong>Outils</strong>, choisir<strong> Développeur Web</strong>, puis <strong>Vue adaptative</strong>.</li>
  <li>Sur le clavier, appuyer sur Echap.</li>
 </ul>
 <p>Lorsque la Vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone redimensionnée.</p>
 <p>En haut de la Vue adaptative se trouve une liste déroulante de tailles prédéfinies, utiles pour avoir rapidement un aperçu du design dans les tailles d'écrans les plus répandues. Il y a également un bouton "rotation" qui permet d'inverser, en un clic, les valeurs de largeur et hauteur (action similaire à la rotation d'un smartphone ou d'une tablette).</p>
 <h2 id="Modify_Responsive_Size_Presets" name="Modify_Responsive_Size_Presets">Modifier les tailles prédéfinies</h2>
 <p>L'outil de Vue adaptative contient par défaut un certain nombre de tailles prédéfinies, pour des résolutions d'ordinateurs de bureau, tablettes et mobiles. Cependant, vous voudrez peut-être ajouter des résolutions personnalisées, pour de nouveaux appareils à la taille d'écran différente. La manipulation à effectuer est la suivante:</p>
 <ol>
  <li>Dans la liste déroulante, sélectionner l'option qui contient "(personnalisée)".</li>
  <li>Utiliser la poignée de redimensionnement en bas à droite de la zone de contenu pour changer la taille.</li>
  <li>Lorsque la taille désirée est atteinte, choisir "Ajouter la présélection" en bas de la liste déroulante des tailles.</li>
 </ol>
</div>
<p>&nbsp;</p>
Revenir à cette révision