Den här artikeln kommer att tillhandahålla proceduren för att tillämpa minsta höjd och maximal höjd på medvindsbrytpunkter och mediefrågor med hjälp av följande disposition:
- Ställa in Min-höjd-egenskap på medvindsbrytpunkter och mediefrågor
- Ställa in egenskapen maxhöjd på medvindsbrytpunkter och mediefrågor
Hur ställer jag in min-höjd egendom på Tailwind Breakpoint & Media Queries?
Tailwind tillhandahåller standardbrytpunkter och mediefrågor för att göra designen responsiv för olika skärmstorlekar. De egenskaper som tillhandahålls för brytpunkterna tillämpas när den angivna skärmstorleken är uppfylld. Minsta bredd för dessa standardbrytpunkter beskrivs enligt följande:
- sm: Minsta bredd på '640px'.
- md: Minsta bredd på '768px'.
- lg: Minsta bredd på '1024px'.
- xl: Minsta bredd på '1280px'.
- 2xl: Minsta bredd på '1536px'.
Egenskapen min-höjd anger den nedre gränsen för höjden på ett element. Det betyder att den anger den minsta höjd som ett element får ha. För att använda egenskapen min-height med brytpunkterna i Tailwind, används följande syntax:
< div klass = '{brytpunktsprefix}:min-h-{värde}...' > < / div >
Låt oss använda den ovan definierade syntaxen i en demonstration för att få en bättre förståelse. I det här exemplet kommer minimihöjdgränsen för elementet att öka på ' md ' brytpunkt. Detta kommer att resultera i att elementets totala höjd ökar.
< div klass = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Öka skärmen Storlek för att öka minimihöjden< / div >
Förklaringen till ovanstående kod är följande:
- den ' h-48 ” klass ger en höjd på 192px till div-elementet.
- den ' w-48 ” klass ger en höjd på 192px till div-elementet.
- den ' rundad-md ” klass tillhandahåller det runda hörnet till div-elementet.
- den ' bg-{color}-{number} ” klass ger den angivna färgen till bakgrunden för div-elementet.
- den ' text-center ” klass placerar textelementet i mitten av div-elementet.
- den ' md:min-h-skärm ” klass kommer att öka den lägsta höjdgränsen lika med 100 % skärmhöjd.
Produktion:
Det kan ses i utgången att när ' md ” skärmstorlek är uppfylld, kommer elementet att få 100 % av skärmhöjden. Detta händer eftersom minimihöjdgränsen för ' md ” brytpunkten sätts lika med skärmhöjden:
Hur ställer man in maxhöjdsegenskap på medvindsbrytpunkt och mediafrågor?
Maxhöjdklassen sätter den övre gränsen för höjdegenskapen i Tailwind. Det betyder att den anger den maximala höjden ett element kan ha. Syntaxen för att använda den lägsta höjdklassen med brytpunkter är följande:
< div klass = '{brytpunktsprefix}:max-h-{storlek}...' > < / div >Låt oss använda den ovan definierade syntaxen i en demonstration för att få en bättre förståelse. I det här exemplet kommer elementet att förses med en specifik maximal höjdgräns för ' md ' brytpunkt. Detta kommer att minska standardhöjden som tillhandahålls för elementet.
< div klass = 'h-96 w-48 rundad-md bg-grön-500 text-center md:max-h-60' >Öka skärmen Storlek för att öka minimihöjden< / div >Observera att i ovanstående kod är standardhöjden för ett element försedd med 'h-96', dvs 384px. Denna höjd minskar dock till '240px' när 'md'-brytpunkten uppnås. Detta beror på att ' md:max-h-60 ' klass.
Produktion:
I utgången nedan kan det tydligt ses att när skärmstorleken når ' md ” brytpunkt, blir elementhöjden på elementet mindre.
Det handlar om att ställa in egenskapen min och maxhöjd med Tailwind-brytpunkter.
Slutsats
För att ställa in egenskapen för maximal höjd med brytpunkterna för medvind och mediefrågor, ' {brytpunktsprefix}:max-h-{storlek} ” klass används. På liknande sätt, för att ställa in egenskapen minimihöjd med brytpunkterna för medvind, ' {brytpunktsprefix}:min-h-{storlek} ” klass används. Den här artikeln har tillhandahållit proceduren för att tillämpa min- och maxhöjdegenskaper på brytpunkter och mediefrågor i Tailwind.