Adapter le design avec des règles d’écran

Un titre peut être confortable à lire sur ordinateur et trop grand sur mobile. Une règle d’écran permet de donner une autre valeur à une propriété selon la largeur disponible. Le texte reste le même ; son apparence change.

Dans ce guide, nous utilisons la taille d’un titre en mode Expert, avec les commandes visuelles. Aucun code à saisir.

Avant de commencer

Ouvrez votre page et affichez plusieurs rendus côte à côte. Sélectionnez le texte à adapter, puis retrouvez Taille dans ses réglages de style.

Choisir le cadre mobile ne réserve pas vos modifications au mobile. C’est la règle associée à la valeur qui détermine où elle s’applique.

1. Repérer la valeur de base et les règles

La valeur de base sert de point de départ. Les lignes accompagnées d’un badge, comme sm, md ou lg, ajoutent une valeur à partir d’une certaine largeur.

Une règle md ne s’arrête pas à la tablette : elle continue à s’appliquer sur les écrans plus larges. Pour la même propriété, une règle commençant plus loin peut ensuite la remplacer.

Par exemple, avec une taille de base de 32 px, une règle md à 48 px et une règle lg à 64 px, le titre mesure 32 px en dessous de 768 px, 48 px de 768 à 1 023 px, puis 64 px à partir de 1 024 px.

Ces repères décrivent les seuils montrés dans la démonstration. Si le projet utilise des seuils personnalisés, fiez-vous aux conditions affichées dans son interface.

2. Modifier la taille de base

Ouvrez le sélecteur de Taille sur la ligne de base. Choisissez une taille proposée, puis observez les cadres. Dans la vidéo, le choix 5XL donne 48 px.

Les règles déjà présentes gardent leur valeur. Si le mobile change mais que la tablette et l’ordinateur restent identiques, une règle applicable à ces largeurs remplace probablement la valeur de base.

3. Ajouter une taille pour la tablette

Survolez la propriété Taille, puis ouvrez son menu d’ajout de règle. Choisissez Tablet ou Tablette, selon la langue de l’interface. Une ligne portant le badge md apparaît.

Ouvrez le sélecteur de cette nouvelle ligne et choisissez la taille souhaitée. Vérifiez immédiatement le résultat dans les différents cadres. Dans la démonstration, la tablette passe à 48 px ; le mobile et l’ordinateur conservent leurs réglages, car les règles existantes restent prioritaires là où elles s’appliquent.

4. Modifier le seuil d’une règle

Cliquez sur le badge devant la valeur à modifier. Dans la ligne Responsive, choisissez le nouveau seuil, puis cliquez sur Définir le modificateur.

Dans la vidéo, la règle passe de sm à md. Sa valeur commence donc à s’appliquer à 768 px au lieu de 640 px. Ce changement déplace le début de la règle ; il ne change pas directement la valeur de taille.

5. Retirer une valeur conditionnelle

Survolez la ligne de la règle que vous voulez retirer. Utilisez son icône de suppression, représentée par un cercle avec un signe moins. Vérifiez que vous intervenez sur la bonne ligne, par exemple md, et sur la bonne propriété.

Retirer cette valeur ne supprime pas l’élément de la page. Le builder reprend la valeur de base ou une autre règle applicable. Si le résultat ne convient pas, utilisez Annuler dans la barre du builder.

6. Vérifier avant d’enregistrer

Comparez les rendus, puis regardez aussi une largeur proche du seuil modifié : un titre peut tenir à 768 px et devenir trop serré juste en dessous. Vérifiez les retours à la ligne, les débordements et la place des éléments voisins. Enregistrez quand le résultat convient.

Si le résultat vous surprend

La modification apparaît sur plusieurs écrans. Vérifiez le badge de la ligne modifiée. Une valeur de base peut affecter toutes les largeurs ; une règle md peut affecter la tablette et l’ordinateur.

La modification n’apparaît pas sur ordinateur. Une règle lg ou une règle commençant plus loin peut remplacer celle que vous venez de modifier.

Le texte lui-même change partout. Le contenu est partagé entre les cadres d’une même page et d’une même langue. Les règles d’écran adaptent son apparence, pas son texte.

Le résultat semble différent après la suppression. Regardez la valeur qui prend le relais : supprimer une règle ne remet pas forcément toutes les largeurs à la même taille.

Pour vérifier les liens et les interactions, passez ensuite dans l’aperçu.

Pour continuer

Pour appliquer ces règles à des boutons ou à une grille, suivez le guide Adapter la disposition sur mobile.