Utilisation des Points de Rupture pour la Conception Réactive dans Tailwind CSS
Tailwind CSS facilite la création de conceptions réactives en fournissant des classes utilitaires pour les points de rupture et les requêtes média.
Points de rupture
Les points de rupture dans Tailwind CSS sont définis à des tailles d'écran spécifiques, permettant d'appliquer différents styles selon la largeur de la fenêtre d'affichage.
Points de rupture par défaut
| Breakpoint | Description |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Ces points de rupture peuvent être utilisés comme préfixes pour appliquer des styles de manière conditionnelle en fonction de la largeur de la fenêtre d'affichage.
index.html
Explication
bg-blue-500: Définit la couleur d’arrière-plan sur une teinte de bleu par défaut ;p-4: Ajoute une marge intérieure de 1rem (16px) sur tous les côtés ;sm:bg-green-500: Définit la couleur d’arrière-plan sur une teinte de vert pour les petits écrans et plus (min-width : 640px) ;md:bg-red-500: Définit la couleur d’arrière-plan sur une teinte de rouge pour les écrans moyens et plus (min-width : 768px) ;lg:bg-yellow-500: Définit la couleur d’arrière-plan sur une teinte de jaune pour les grands écrans et plus (min-width : 1024px) ;xl:bg-purple-500: Définit la couleur d’arrière-plan sur une teinte de violet pour les très grands écrans et plus (min-width : 1280px).
Application des styles responsives
Il est possible d’appliquer des styles responsives à toute classe utilitaire dans Tailwind CSS en la préfixant avec un point de rupture.
index.html
Explication
Rembourrage :
p-4: Ajoute un rembourrage de 1rem (16px) sur tous les côtés par défaut ;sm:p-6: Ajoute un rembourrage de 1,5rem (24px) sur tous les côtés pour les petits écrans et plus (min-width : 640px) ;md:p-8: Ajoute un rembourrage de 2rem (32px) sur tous les côtés pour les écrans moyens et plus (min-width : 768px) ;lg:p-10: Ajoute un rembourrage de 2,5rem (40px) sur tous les côtés pour les grands écrans et plus (min-width : 1024px) ;xl:p-12: Ajoute un rembourrage de 3rem (48px) sur tous les côtés pour les très grands écrans et plus (min-width : 1280px).
Taille du texte :
sm:text-sm: Définit la taille de police à petite (0,875rem ou 14px) pour les petits écrans et plus (min-width : 640px) ;md:text-base: Définit la taille de police à base (1rem ou 16px) pour les écrans moyens et plus (min-width : 768px) ;lg:text-lg: Définit la taille de police à grande (1,125rem ou 18px) pour les grands écrans et plus (min-width : 1024px) ;xl:text-xl: Définit la taille de police à très grande (1,25rem ou 20px) pour les très grands écrans et plus (min-width : 1280px).
Graisse de police :
sm:font-light: Applique une graisse de police légère pour les petits écrans et plus (min-width : 640px) ;md:font-normal: Applique une graisse de police normale pour les écrans moyens et plus (min-width : 768px) ;lg:font-semibold: Applique une graisse de police semi-grasse pour les grands écrans et plus (min-width : 1024px) ;xl:font-bold: Applique une graisse de police grasse pour les très grands écrans et plus (min-width : 1280px).
Remarque
Vous recherchez des informations spécifiques sur la réactivité ? Consultez le lien suivant.
1. Comment appliquer une couleur d’arrière-plan au point de rupture md ?
2. Quelle classe utilitaire modifie le remplissage au point de rupture sm ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 3.57Utilisation des Points de Rupture pour la Conception Réactive dans Tailwind CSS
Glissez pour afficher le menu
Tailwind CSS facilite la création de conceptions réactives en fournissant des classes utilitaires pour les points de rupture et les requêtes média.
Points de rupture
Les points de rupture dans Tailwind CSS sont définis à des tailles d'écran spécifiques, permettant d'appliquer différents styles selon la largeur de la fenêtre d'affichage.
Points de rupture par défaut
| Breakpoint | Description |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Ces points de rupture peuvent être utilisés comme préfixes pour appliquer des styles de manière conditionnelle en fonction de la largeur de la fenêtre d'affichage.
index.html
Explication
bg-blue-500: Définit la couleur d’arrière-plan sur une teinte de bleu par défaut ;p-4: Ajoute une marge intérieure de 1rem (16px) sur tous les côtés ;sm:bg-green-500: Définit la couleur d’arrière-plan sur une teinte de vert pour les petits écrans et plus (min-width : 640px) ;md:bg-red-500: Définit la couleur d’arrière-plan sur une teinte de rouge pour les écrans moyens et plus (min-width : 768px) ;lg:bg-yellow-500: Définit la couleur d’arrière-plan sur une teinte de jaune pour les grands écrans et plus (min-width : 1024px) ;xl:bg-purple-500: Définit la couleur d’arrière-plan sur une teinte de violet pour les très grands écrans et plus (min-width : 1280px).
Application des styles responsives
Il est possible d’appliquer des styles responsives à toute classe utilitaire dans Tailwind CSS en la préfixant avec un point de rupture.
index.html
Explication
Rembourrage :
p-4: Ajoute un rembourrage de 1rem (16px) sur tous les côtés par défaut ;sm:p-6: Ajoute un rembourrage de 1,5rem (24px) sur tous les côtés pour les petits écrans et plus (min-width : 640px) ;md:p-8: Ajoute un rembourrage de 2rem (32px) sur tous les côtés pour les écrans moyens et plus (min-width : 768px) ;lg:p-10: Ajoute un rembourrage de 2,5rem (40px) sur tous les côtés pour les grands écrans et plus (min-width : 1024px) ;xl:p-12: Ajoute un rembourrage de 3rem (48px) sur tous les côtés pour les très grands écrans et plus (min-width : 1280px).
Taille du texte :
sm:text-sm: Définit la taille de police à petite (0,875rem ou 14px) pour les petits écrans et plus (min-width : 640px) ;md:text-base: Définit la taille de police à base (1rem ou 16px) pour les écrans moyens et plus (min-width : 768px) ;lg:text-lg: Définit la taille de police à grande (1,125rem ou 18px) pour les grands écrans et plus (min-width : 1024px) ;xl:text-xl: Définit la taille de police à très grande (1,25rem ou 20px) pour les très grands écrans et plus (min-width : 1280px).
Graisse de police :
sm:font-light: Applique une graisse de police légère pour les petits écrans et plus (min-width : 640px) ;md:font-normal: Applique une graisse de police normale pour les écrans moyens et plus (min-width : 768px) ;lg:font-semibold: Applique une graisse de police semi-grasse pour les grands écrans et plus (min-width : 1024px) ;xl:font-bold: Applique une graisse de police grasse pour les très grands écrans et plus (min-width : 1280px).
Remarque
Vous recherchez des informations spécifiques sur la réactivité ? Consultez le lien suivant.
1. Comment appliquer une couleur d’arrière-plan au point de rupture md ?
2. Quelle classe utilitaire modifie le remplissage au point de rupture sm ?
Merci pour vos commentaires !
