In dit artikel wordt de procedure beschreven voor het toepassen van minimale hoogte en maximale hoogte op Tailwind-breekpunten en mediaquery's met behulp van het volgende overzicht:
- Minimale hoogte-eigenschap instellen op Tailwind-breekpunten en mediaquery's
- Eigenschap voor maximale hoogte instellen op Tailwind-breekpunten en mediaquery's
Hoe stel ik de minimale hoogte in op Tailwind Breakpoint- en mediaquery's?
Tailwind biedt standaard breekpunten en mediaquery's om het ontwerp responsief te maken voor verschillende schermformaten. De eigenschappen die aan de breekpunten worden verstrekt, worden toegepast wanneer aan de opgegeven schermgrootte wordt voldaan. De minimale breedte voor deze standaardbreekpunten wordt als volgt beschreven:
- sm: Minimale breedte van “640px”.
- md: Minimale breedte van “768px”.
- LG: Minimale breedte van “1024px”.
- xl: Minimale breedte van “1280px”.
- 2xl: Minimale breedte van “1536px”.
De eigenschap min-height stelt de ondergrens voor de hoogte van een element in. Dit betekent dat het de minimale hoogte specificeert die een element mag hebben. Om de eigenschap min-height te gebruiken met de breekpunten in Tailwind, wordt de volgende syntaxis gebruikt:
< div klas = '{breekpuntvoorvoegsel}:min-h-{waarde}...' > < / div >
Laten we de hierboven gedefinieerde syntaxis in een demonstratie gebruiken om een beter begrip te krijgen. In dit voorbeeld zal de minimale hoogtelimiet voor het element toenemen op de “ md ' breekpunt. Dit zal resulteren in het vergroten van de totale hoogte van het element.
< div klas = 'h-48 w-48 afgerond-md bg-groen-500 tekst-midden md:min-h-scherm' >Vergroot het scherm Maat om de minimumhoogte te vergroten< / div >
De uitleg voor de bovenstaande code is als volgt:
- De ' u-48 ”klasse biedt een hoogte van 192px aan het div-element.
- De ' w-48 ”klasse biedt een hoogte van 192px aan het div-element.
- De ' afgerond-md ” klasse levert de ronde hoek aan het div-element.
- De ' bg-{kleur}-{nummer} ” klasse geeft de opgegeven kleur aan de achtergrond van het div-element.
- De ' tekst-centrum ” klasse positioneert het tekstelement in het midden van het div-element.
- De ' md:min-h-scherm ”-klasse verhoogt de minimale hoogtelimiet gelijk aan 100% schermhoogte.
Uitgang:
In de uitvoer is te zien dat wanneer de “ md Wanneer aan de schermgrootte wordt voldaan, krijgt het element 100% van de schermhoogte. Dit gebeurt omdat de minimale hoogtelimiet voor de “ md Het breekpunt wordt gelijkgesteld aan de schermhoogte:
Hoe stel ik de maximale hoogte in op Tailwind Breakpoint- en mediaquery's?
De maximale hoogteklasse bepaalt de bovengrens voor de hoogte-eigenschap in Tailwind. Dit betekent dat het de maximale hoogte specificeert die een element kan hebben. De syntaxis voor het gebruik van de minimale hoogteklasse met breekpunten is als volgt:
< div klas = '{breekpuntvoorvoegsel}:max-h-{grootte}...' > < / div >Laten we de hierboven gedefinieerde syntaxis in een demonstratie gebruiken om een beter begrip te krijgen. In dit voorbeeld wordt het element voorzien van een specifieke maximale hoogtelimiet voor de “ md ' breekpunt. Hierdoor wordt de standaardhoogte voor het element beperkt.
< div klas = 'h-96 w-48 afgerond-md bg-groen-500 tekst-midden md:max-h-60' >Vergroot het scherm Maat om de minimumhoogte te vergroten< / div >Merk op dat in de bovenstaande code de standaardhoogte van een element wordt gegeven met “h-96”, d.w.z. 384px. Deze hoogte wordt echter beperkt tot “240px” wanneer aan het “md”-breekpunt wordt voldaan. Dit komt door de “ md:max-h-60 ' klas.
Uitgang:
In de onderstaande uitvoer is duidelijk te zien dat zodra de schermgrootte de “ md breekpunt, de elementhoogte van het element wordt kleiner.
Dat gaat allemaal over het instellen van de minimale en maximale hoogte-eigenschap met Tailwind-breekpunten.
Conclusie
Om de eigenschap maximale hoogte in te stellen met de Tailwind-breekpunten en mediaquery's, de ' {breekpuntvoorvoegsel}:max-h-{grootte} ”-klasse wordt gebruikt. Op dezelfde manier, om de minimale hoogte-eigenschap in te stellen met de Tailwind-breekpunten, de “ {breekpuntvoorvoegsel}:min-h-{grootte} ”-klasse wordt gebruikt. In dit artikel wordt de procedure beschreven voor het toepassen van min- en max-height-eigenschappen op breekpunten en mediaquery's in Tailwind.