Design réactif avec Tailwind CSS

Le design responsive est un élément important du développement web moderne. Il garantit que les pages web s'affichent correctement sur différentes tailles d'écran.

Tailwind CSS fournit des outils très pratiques pour mettre en œuvre des mises en page responsives. Son design responsive est principalement contrôlé viades points de ruptureetdes préfixespour contrôler l'application des styles à différentes tailles d'écran.

Utilisez des classes utilitaires responsives pour construire des interfaces utilisateur adaptatives

Chaque classe utilitaire de Tailwind CSS peut être appliquée conditionnellement en fonction des points de rupture, ce qui facilite la création d'interfaces responsives complexes en HTML.

1. Assurez-vous que les paramètres du viewport sont corrects

Avant de commencer, assurez-vous que la balise meta viewport suivante a été ajoutée dans la<head>section de votre document HTML :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cette étape garantit que le contenu web s'adapte et s'affiche correctement sur les appareils mobiles.

2. Appliquez les classes utilitaires via des préfixes de point de rupture

Pour appliquer une classe utilitaire à un point de rupture spécifique, préfixez simplement le nom de la classe avec le nom du point de rupture et utilisez:un deux-points pour les séparer.

• Lorsque la largeur de l'écran est inférieure à 768px, la largeur de l'image est16（w-16）。
• Sur les écrans moyens (768px ou plus), la largeur de l'image devient32（md:w-32）。
• Sur les grands écrans (1024px ou plus), la largeur de l'image devient48（lg:w-48）。

3. Cinq points de rupture fournis par défaut

Tailwind CSS prend en charge les cinq points de rupture suivants par défaut. Ces points de rupture s'inspirent des résolutions d'appareils courantes :

Comment implémenter un design responsive

1. Contrôle de la mise en page responsive

Dans Tailwind, vous pouvez utiliser des préfixes responsive pour ajuster la mise en page, les polices, les couleurs, les espacements, et plus encore.

Explication：

• Sur les petits écrans (sm), le texte est centré (text-center）。
• Sur les écrans moyens (md), le texte est aligné à gauche (text-left）。
• Sur les écrans larges et au-delà (lg), le texte est aligné à droite (text-right）。

2. Mise en page de grille responsive

En utilisant des classes utilitaires responsive, vous pouvez définir des dispositions de colonnes à différentes tailles d'écran.

Explication：

• Par défaut, la grille est sur une seule colonne (grid-cols-1）。
• Sur les petits écrans (640px ou plus), la grille s'ajuste à deux colonnes (sm:grid-cols-2）。
• Sur les grands écrans (1024px ou plus), la grille s'ajuste à quatre colonnes (lg:grid-cols-4）。

3. Points d'arrêt responsive personnalisés

Outre les cinq points d'arrêt par défaut, Tailwind vous permet de personnaliser les points d'arrêt viatailwind.config.jspour répondre aux exigences spécifiques du projet.

Les points d'arrêt personnalisés peuvent être utilisés exactement comme les points d'arrêt par défaut :

4. Classes de requêtes média

Tailwind fournit des requêtes média personnalisées, par exemple :

• Largeur minimale：min-[...]。
• Largeur maximale：max-[...]。

5. Masquage et affichage adaptatifs

Grâce à des classes telles quehiddenetblock, combinées à des préfixes responsives, vous pouvez masquer ou afficher du contenu :