Design adaptatif

Votre site doit s’afficher correctement sur tous les écrans. L’éditeur vous permet de vérifier vos pages aux largeurs d’un téléphone, d’une tablette et d’un ordinateur, et d’appliquer des styles différents selon la taille de l’écran.

Vérifier les autres largeurs d’écran

Cliquez sur le menu des largeurs (l’icône d’appareil à gauche de la barre de chemin) et choisissez une largeur. La zone de travail se redimensionne pour vous montrer le rendu de la page sur cet écran.

Option	Largeur
Petit téléphone	320px
Mobile	375px
Grand téléphone	425px
Tablette	768px
Ordinateur	Pleine largeur

Vous pouvez aussi appuyer sur D pour un ordinateur, T pour une tablette (768px) ou M pour un mobile (375px), lorsque vous n’êtes pas en train de saisir du texte.

Changer la largeur ne modifie aucun style. Cela redimensionne uniquement la zone de travail.

Appliquer des styles selon la taille de l’écran

Un style peut avoir un préfixe de taille d’écran pour ne s’appliquer qu’à partir de cette largeur.

Préfixe	S’applique à partir de
sm:	640px
md:	768px
lg:	1024px
xl:	1280px

Par exemple, text-2xl md:text-4xl affiche un titre avec un texte plus petit sur les téléphones et plus grand à partir des tablettes.

Pour en ajouter un, sélectionnez l’élément et ouvrez la section Avancé du panneau de modification. Saisissez la classe dans le champ Saisissez une classe et appuyez sur Enter, puis appuyez sur Enter. Changez ensuite de largeur pour vérifier le résultat.

Vous pouvez aussi le demander avec vos propres mots. Sélectionnez l’élément, appuyez sur ⌘K / Ctrl+K et saisissez une demande comme « masquer sur mobile » ou « empiler sur mobile ». Consultez Modifier avec l’IA.

Masquer des éléments sur certains écrans

Ajoutez hidden pour masquer un élément partout, puis ajoutez une classe avec un préfixe de taille d’écran pour l’afficher à partir de cette largeur :

• hidden md:block le masque sur les téléphones et l’affiche à partir des tablettes.
• md:hidden l’affiche sur les téléphones et le masque à partir des tablettes.