mozilla
Vos résultats de recherche

    Vue adaptative

    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. On l'appelle « vue adaptative ». Celle-ci 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 pour pouvoir 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 laisse moins d'espace dans la fenêtre pour les outils de développement.

    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).
    • Sur le clavier, appuyer sur Ctrl+Maj+M pour Windows ou Linux, ou Cmd+Option+M pour OS X.
    • Appuyer sur le bouton Vue adaptative de la barre d’outils de développement.

    Pour désactiver la vue adaptative :

    • Sélectionner à nouveau Vue adaptative dans le menu de Firefox.
    • Sur le clavier, appuyer à nouveau sur Ctrl+Maj+M, ou sur Échap.
    • Cliquer sur le bouton de fermeture en haut à gauche de la fenêtre.

    En haut de Vue adaptative se trouve une liste déroulante des tailles prédéfinies. Elles sont 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 de hauteur (action similaire à la rotation d'un smartphone ou d'une tablette).

    Redimensionnement

    Vous pouvez redimensionner la zone de contenu selon deux méthodes :

    • en utilisant le contrôle Sélectionner la taille ;
    • en cliquant-déposant les contrôles situés à droite et au fond, ou celui dans le coin en bas à droite.

    Si vous redimensionnez en utilisant le cliquer-déposer, 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 :

    1. Redimensionner la fenêtre à la taille voulue en utilisant une des méthodes citées plus haut ;
    2. Lorsque la taille désirée est atteinte, choisir Ajouter la présélection en bas de la liste déroulante des tailles ;
    3. Nommez votre présélection dans la fenêtre qui apparait alors ;
    4. Voilà, c'est enregistré.

    Contrôles de la vue adaptative

    En haut de la page sur laquelle la vue adaptative est active, se trouvent les cinq contrôles suivants :

    Quitter la vue adaptative Fermer la vue adaptative et retourner à la navigation normale.
    Sélectionner la taille

    Choisir parmi des tailles présélectionnées ou définir les vôtres.

    Depuis Firefox 33, les nombres sont directement éditables, cela permet de facilement définir des dimensions personnalisés.

    Rotation Alterner entre la vue portrait et paysage.

    Simuler les événements tactiles

    Activer/Désactiver la simulation des événements tactiles : quand cette option est active, les mouvements de la souris sont convertis en événements tactiles.

    Capture d'écran

    Prendre une capture d'écran de la zone de contenu.

    Les captures d'écrans seront sauvées dans le dossier de téléchargements de Firefox.

    Étiquettes et contributeurs liés au document

    Dernière mise à jour par : trevorh,