Denne artikel vil give proceduren for anvendelse af minimumshøjde og maksimumhøjde på medvindsbrudpunkter og medieforespørgsler ved hjælp af følgende oversigt:
- Indstilling af min-højde-egenskab på medvindsbrudpunkter og medieforespørgsler
- Indstilling af egenskab for maks. højde på medvindsbrudpunkter og medieforespørgsler
Hvordan indstilles min-højde-ejendom på medvindsbrudpunkt og medieforespørgsler?
Tailwind giver standard breakpoints og medieforespørgsler for at gøre designet responsivt for forskellige skærmstørrelser. Egenskaberne til brudpunkterne anvendes, når den angivne skærmstørrelse er opfyldt. Minimumsbredden for disse standardbrudpunkter er beskrevet som følger:
- sm: Minimumsbredde på '640px'.
- md: Minimumsbredde på '768px'.
- lg: Minimumsbredde på '1024px'.
- xl: Minimumsbredde på '1280px'.
- 2xl: Minimumsbredde på '1536px'.
Egenskaben min-højde angiver den nedre grænse for højden af et element. Det betyder, at det angiver den minimumshøjde et element må have. For at bruge egenskaben min-højde med brudpunkterne i Tailwind, bruges følgende syntaks:
< div klasse = '{breakpoint prefix}:min-h-{value}...' > < / div >
Lad os bruge den ovenfor definerede syntaks i en demonstration for at få en bedre forståelse. I dette eksempel vil minimumshøjdegrænsen for elementet stige på ' md ” brudpunkt. Dette vil resultere i en forøgelse af elementets samlede højde.
< div klasse = 'h-48 w-48 afrundet-md bg-grøn-500 tekstcenter md:min-h-skærm' >Forøg skærmen Størrelse for at øge minimumshøjden< / div >
Forklaringen på ovenstående kode er som følger:
- Det ' h-48 ” klasse giver en højde på 192px til div-elementet.
- Det ' w-48 ” klasse giver en højde på 192px til div-elementet.
- Det ' afrundet-md ” klasse giver det runde hjørne til div-elementet.
- Det ' bg-{color}-{number} ” klasse giver den angivne farve til baggrunden for div-elementet.
- Det ' tekst-center ” klasse placerer tekstelementet til midten af div-elementet.
- Det ' md:min-h-skærm ” klasse vil øge minimumshøjdegrænsen svarende til 100 % skærmhøjde.
Produktion:
Det kan ses i outputtet, at når ' md ” skærmstørrelse er opfyldt, vil elementet få 100 % af skærmhøjden. Dette sker, fordi minimumshøjdegrænsen for ' md ” brudpunkt er sat lig med skærmhøjden:
Hvordan indstilles maks. højde-ejendom på medvindsbrudpunkt og medieforespørgsler?
Den maksimale højdeklasse sætter den øvre grænse for højdeegenskaben i Tailwind. Det betyder, at det angiver den maksimale højde et element kan have. Syntaksen for at bruge minimumshøjdeklassen med brudpunkter er som følger:
< div klasse = '{breakpoint prefix}:max-h-{size}...' > < / div >Lad os bruge den ovenfor definerede syntaks i en demonstration for at få en bedre forståelse. I dette eksempel vil elementet være forsynet med en specifik maksimal højdegrænse for ' md ” brudpunkt. Dette vil indsnævre standardhøjden til elementet.
< div klasse = 'h-96 w-48 afrundet-md bg-grøn-500 tekstcenter md:max-h-60' >Forøg skærmen Størrelse for at øge minimumshøjden< / div >Bemærk, at i ovenstående kode er standardhøjden for et element forsynet med 'h-96', dvs. 384px. Denne højde indsnævres dog til '240px', når 'md'-brudpunktet er opfyldt. Dette skyldes ' md:max-h-60 ' klasse.
Produktion:
I nedenstående output kan det tydeligt ses, at når skærmstørrelsen når ' md ” brudpunkt, bliver elementhøjden på elementet mindre.
Det handler om at indstille egenskaben for minimum og maksimum højde med Tailwind breakpoints.
Konklusion
For at indstille den maksimale højde egenskab med Tailwind breakpoints og medieforespørgsler, ' {breakpoint prefix}:max-h-{size} ” klasse bruges. Tilsvarende, for at indstille egenskaben for minimumshøjde med Tailwind-brudpunkterne, ' {breakpoint prefix}:min-h-{size} ” klasse bruges. Denne artikel har angivet proceduren for anvendelse af egenskaber for min og maks. højde på brudpunkter og medieforespørgsler i Tailwind.