Un responsive design est un design qui 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. Le mode « vue adaptative » permet de voir facilement le rendu de votre design sur des écrans de tailles différentes.
La capture d’écran ci-dessous montre une page de la version mobile de Wikipédia, vue dans une zone de contenu de 320×480.
La vue adaptative est utile, car elle permet de changer rapidement la taille de cette zone de contenu.
Bien sûr, vous pourriez simplement redimensionner la fenêtre du navigateur. Mais cela peut être gênant, car tous les onglets sont alors redimensionnés. Et cela peut rendre l'interface du navigateur bien plus dure à utiliser.
Quand la vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone de contenu redimensionnée.
Activation et désactivation
Il existe trois façons d’activer la vue adaptative :
- Dans le menu de Firefox, sélectionner le sous-menu Développement puis Vue adaptative (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur OS X).
- Appuyer sur le bouton Vue adaptative de la barre d’outils de développement.
- Sur le clavier, appuyer sur Ctrl+Maj+M pour Windows ou Linux, ou Cmd+Option+M pour OS X.
Pour désactiver la vue adaptative :
- Sélectionner à nouveau Vue adaptative dans le menu de Firefox.
- Cliquer sur le bouton de fermeture en haut à gauche de la fenêtre.
- Sur le clavier, appuyer à nouveau sur Ctrl+Maj+M, ou sur Échap.
Redimensionnement
Vous pouvez redimensionner la zone de contenu de deux façons différentes :
- en utilisant le contrôle "Sélectionner la taille
- en cliquant-glissant les contrôles situés à droite et en bas, ou celui dans le coin en bas à droite.
Si vous redimensionnez en utilisant le cliquer-glisser, vous pouvez maintenir la touche CTRL (cmd sous Mac) enfoncée pour ralentir la vitesse de redimensionnement afin d'être plus précis.
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 :
- Redimensionner la fenêtre à la taille voulue en utilisant une des méthodes citées plus haut ;
- Lorsque la taille désirée est atteinte, choisir "Ajouter la présélection" en bas de la liste déroulante des tailles ;
- Nommez votre présélection dans la fenêtre qui apparait alors ;
- Voilà, c'est enregistré.
