Rendre la page responsive

Dans ce tutoriel, vous prenez une page qui s’affiche bien sur ordinateur et vous l’adaptez aux tablettes et aux téléphones. Vous apprenez d’où vient une valeur de style, comment la réinitialiser et comment construire des mises en page qui s’adaptent toutes seules. Utilisez la page du tutoriel Créer une landing page, ou n’importe quelle page avec un hero et une rangée de cartes.

Choisir un point de rupture

1. Regarder les trois plans de travail

   Ouvrez la page. Le canevas affiche un plan de travail par point de rupture : Desktop (1440 px), Tablet (768 px) et Phone (390 px). Tous affichent la même page : un problème sur téléphone est donc visible pendant que vous travaillez sur ordinateur.

2. Changer avec le sélecteur de point de rupture

   Le sélecteur de point de rupture se trouve dans la barre d’outils, à côté du sélecteur de page : une icône d’écran, une de tablette et une de téléphone. Choisissez l’icône tablette. La caméra se déplace sur le plan de travail tablette, et l’en-tête de l’inspecteur affiche maintenant Editing Tablet.

3. Savoir dans quel sens les styles s’appliquent

   Les styles vont du plus grand au plus petit. Les valeurs de l’ordinateur s’appliquent partout. Les valeurs de la tablette remplacent celles de l’ordinateur sur tablette et téléphone. Les valeurs du téléphone remplacent les deux, sur téléphone uniquement. Une modification sur ordinateur ne touche jamais les points de rupture plus petits où vous avez défini votre propre valeur.

Lire et réinitialiser les remplacements

1. Modifier une valeur sur tablette

   Tablet actif, sélectionnez le hero et modifiez son Padding dans la section Layout. Seuls les plans de travail tablette et téléphone changent.

2. Lire le point à côté du libellé

   Un petit point apparaît maintenant à côté de Padding. Survolez le libellé pour savoir d’où vient la valeur : Set on Tablet pour une valeur définie ici, Inherited from Desktop pour une valeur héritée d’un point de rupture plus grand, ou From class .feature-card pour une valeur qui vient d’une classe.

3. La réinitialiser

   Cliquez sur le point, ou maintenez ⌥ et cliquez sur le libellé. La valeur tablette est supprimée et le hero reprend le padding de l’ordinateur.

Laisser les rangées passer à la ligne

1. Activer Wrap

   Revenez sur Desktop et sélectionnez la rangée d’atouts. Dans Layout → Direction, activez l’interrupteur Wrap à côté des flèches. Quand les cartes ne tiennent plus, elles passent à la ligne au lieu de rétrécir.

2. Donner aux cartes une largeur minimale

   Sélectionnez une carte. Survolez l’en-tête de la section Size et cliquez sur + (Add min/max). Dans la nouvelle ligne Min, réglez W sur 280px. Les cartes passent maintenant à la ligne dès que chacune deviendrait plus étroite que 280 px.

3. Ajouter un espacement

   Sélectionnez de nouveau la rangée et réglez Gap dans Layout. Le même espacement sépare les cartes, qu’elles soient côte à côte ou les unes au-dessus des autres.

Utiliser des tailles fluides

1. Remplir la largeur

   Sélectionnez l’image du hero. Dans Size, réglez le mode Width sur Fill. L’image prend toute la largeur de son parent sur chaque point de rupture.

2. La limiter avec un maximum

   Cliquez sur + (Add min/max) dans l’en-tête Size et réglez W dans la ligne Max sur 960px. Sur ordinateur, l’image s’arrête à 960 px ; sur tablette et téléphone, elle remplit toujours la largeur.

3. Essayer une largeur relative

   Sélectionnez le groupe de texte du hero, réglez le mode Width sur Relative, puis tapez 80 (l’unité est %). Les largeurs relatives suivent le parent : le texte garde la même proportion sur tous les écrans.

Ajuster pour les téléphones

1. Passer sur Phone

   Choisissez l’icône téléphone dans le sélecteur de point de rupture. L’en-tête de l’inspecteur affiche Editing Phone.

2. Réduire le titre

   Sélectionnez le titre. Dans Typography, diminuez la taille de police dans la ligne Style, par exemple de 56px à 36px. L’ordinateur et la tablette gardent leur taille.

3. Empiler le hero

   Si le hero est une pile horizontale, réglez Layout → Direction sur Vertical (la flèche vers le bas) sur téléphone. Diminuez aussi son Padding pour laisser de la place au contenu.

Vérifier le résultat

1. Prévisualiser

   Appuyez sur ⌘↵ pour prévisualiser. Appuyez de nouveau pour revenir à l’édition.

2. Passer en revue chaque point de rupture

   Choisissez chaque point de rupture tour à tour et parcourez la page. Sélectionnez un élément et survolez ses libellés pour voir quelles valeurs sont définies sur ce point de rupture.

Ce que vous avez appris

• Les valeurs de l’ordinateur descendent vers la tablette et le téléphone ; un point de rupture plus petit ne stocke que ce que vous y modifiez.
• Le point à côté d’un libellé indique d’où vient une valeur, et un clic dessus la réinitialise.
• Wrap, les tailles min et max, et les largeurs Fill et Relative s’adaptent toutes seules : vous avez besoin de moins de remplacements.

Continuez avec les tutoriels suivants, ou lisez les guides sur lesquels celui-ci s’appuie :