Cet article fournira la procédure à suivre pour appliquer la hauteur minimale et la hauteur maximale aux points d'arrêt Tailwind et aux requêtes multimédias en utilisant le schéma suivant :
- Définition de la propriété Min-height sur les points d'arrêt Tailwind et les requêtes multimédias
- Définition de la propriété Max-height sur les points d'arrêt Tailwind et les requêtes multimédias
Comment définir la propriété Min-height sur les requêtes de point d'arrêt et de média Tailwind ?
Tailwind fournit des points d'arrêt et des requêtes multimédias par défaut pour rendre la conception réactive à différentes tailles d'écran. Les propriétés fournies aux points d'arrêt sont appliquées lorsque la taille d'écran spécifiée est atteinte. La largeur minimale de ces points d'arrêt par défaut est décrite comme suit :
- mdr : Largeur minimale de « 640 px ».
- Maryland: Largeur minimale de « 768 px ».
- LG : Largeur minimale de « 1024px ».
- xl : Largeur minimale de « 1 280 px ».
- 2XL : Largeur minimale de « 1 536 px ».
La propriété min-height définit la limite inférieure de la hauteur d'un élément. Cela signifie qu'il spécifie la hauteur minimale qu'un élément est autorisé à posséder. Pour utiliser la propriété min-height avec les points d'arrêt dans Tailwind, la syntaxe suivante est utilisée :
< div classe = '{préfixe du point d'arrêt} :min-h-{valeur}...' > < / div >
Utilisons la syntaxe définie ci-dessus dans une démonstration pour mieux comprendre. Dans cet exemple, la limite de hauteur minimale de l'élément augmentera au fur et à mesure du ' Maryland 'point d'arrêt. Cela aura pour conséquence d'augmenter la hauteur totale de l'élément.
< div classe = 'h-48 w-48 arrondi-md bg-green-500 centre de texte md:min-h-écran' >Augmenter l'écran Taille pour augmenter la hauteur minimale< / div >
L'explication du code ci-dessus est la suivante :
- Le ' h-48 ' La classe fournit une hauteur de 192 px à l'élément div.
- Le ' w-48 ' La classe fournit une hauteur de 192 px à l'élément div.
- Le ' arrondi-md ' La classe fournit le coin arrondi de l'élément div.
- Le ' bg-{couleur}-{numéro} ' La classe fournit la couleur spécifiée à l'arrière-plan de l'élément div.
- Le ' centre de texte ' La classe positionne l'élément de texte au centre de l'élément div.
- Le ' md:min-h-écran 'La classe augmentera la limite de hauteur minimale égale à 100 % de la hauteur de l'écran.
Sortir:
On peut voir dans la sortie que lorsque le « Maryland ' La taille de l'écran est respectée, l'élément obtiendra 100 % de la hauteur de l'écran. Cela se produit parce que la limite de hauteur minimale pour le « Maryland ' Le point d'arrêt est égal à la hauteur de l'écran :
Comment définir la propriété Max-height sur les requêtes de point d'arrêt et de média Tailwind ?
La classe de hauteur maximale définit la limite supérieure de la propriété height dans Tailwind. Cela signifie qu'il spécifie la hauteur maximale qu'un élément peut posséder. La syntaxe d'utilisation de la classe de hauteur minimale avec des points d'arrêt est la suivante :
< div classe = '{préfixe du point d'arrêt} :max-h-{taille}...' > < / div >Utilisons la syntaxe définie ci-dessus dans une démonstration pour mieux comprendre. Dans cet exemple, l'élément sera doté d'une limite de hauteur maximale spécifique pour le « Maryland 'point d'arrêt. Cela réduira la hauteur par défaut fournie à l'élément.
< div classe = 'h-96 w-48 arrondi-md bg-green-500 texte-centre md:max-h-60' >Augmenter l'écran Taille pour augmenter la hauteur minimale< / div >Notez que dans le code ci-dessus, la hauteur par défaut d'un élément est fournie avec « h-96 », soit 384 px. Cependant, cette hauteur se réduit à « 240 px » lorsque le point d'arrêt « md » est atteint. Cela est dû au « md:max-h-60 ' classe.
Sortir:
Dans la sortie ci-dessous, on peut clairement voir qu'une fois que la taille de l'écran atteint ' Maryland ' Point d'arrêt, la hauteur de l'élément devient plus petite.
Il s’agit de définir la propriété de hauteur minimale et maximale avec les points d’arrêt Tailwind.
Conclusion
Pour définir la propriété de hauteur maximale avec les points d'arrêt Tailwind et les requêtes multimédias, le ' {préfixe de point d'arrêt} :max-h-{taille} 'La classe est utilisée. De même, pour définir la propriété de hauteur minimale avec les points d'arrêt Tailwind, le ' {préfixe du point d'arrêt} :min-h-{taille} 'La classe est utilisée. Cet article a fourni la procédure pour appliquer les propriétés min et max-height aux points d'arrêt et aux requêtes multimédias dans Tailwind.