Selles artiklis kirjeldatakse minimaalse kõrguse ja maksimaalse kõrguse rakendamist Tailwindi murdepunktidele ja meediumipäringutele, kasutades järgmist ülevaadet.
- Minimaalse kõrguse atribuudi määramine taganttuule murdepunktide ja meediapäringute jaoks
- Maksimaalse kõrguse atribuudi määramine taganttuule murdepunktide ja meediapäringute jaoks
Kuidas määrata taganttuule murdepunkti ja meediapäringute jaoks minimaalse kõrguse atribuuti?
Tailwind pakub vaikimisi katkestuspunkte ja meediumipäringuid, et muuta kujundus erinevate ekraanisuuruste jaoks tundlikuks. Katkestuspunktidele antud atribuudid rakendatakse siis, kui määratud ekraanisuurus on täidetud. Nende vaikemurdepunktide minimaalset laiust kirjeldatakse järgmiselt.
- sm: Minimaalne laius '640 pikslit'.
- md: Minimaalne laius '768 pikslit'.
- lg: Minimaalne laius '1024 pikslit'.
- xl: Minimaalne laius '1280 pikslit'.
- 2xl: Minimaalne laius '1536 pikslit'.
Min-height atribuut määrab elemendi kõrguse alampiiri. See tähendab, et see määrab minimaalse kõrguse, mis elemendil võib olla. Atribuudi min-height kasutamiseks koos murdepunktidega Tailwindis kasutatakse järgmist süntaksit:
< div klass = '{breakpoint prefix}:min-h-{value}...' > < / div >
Parema arusaamise saamiseks kasutame demonstratsioonis ülalmääratletud süntaksit. Selles näites suureneb elemendi minimaalne kõrguspiirang ' md ” murdepunkt. See suurendab elemendi üldist kõrgust.
< div klass = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Suurendage ekraani Suurus minimaalse kõrguse suurendamiseks< / div >
Ülaltoodud koodi selgitus on järgmine:
- ' h-48 ” klass annab elemendi div kõrguseks 192 pikslit.
- ' w-48 ” klass annab elemendi div kõrguseks 192 pikslit.
- ' ümardatud-md ” klass annab elemendi div ümarnurga.
- ' bg-{color}-{number} ” klass annab elemendi div taustale määratud värvi.
- ' tekstikeskus ” klass paigutab tekstielemendi div-elemendi keskele.
- ' md:min-h-ekraan ” klass suurendab minimaalset kõrguse piirangut, mis võrdub 100% ekraani kõrgusega.
Väljund:
Väljundist on näha, et kui ' md Kui ekraani suurus on täidetud, saab element 100% ekraani kõrgusest. See juhtub seetõttu, et minimaalne kõrguse piirang md ” murdepunkt on seatud võrdseks ekraani kõrgusega:
Kuidas määrata Tailwindi murdepunkti ja meediapäringute jaoks maksimaalse kõrguse atribuuti?
Maksimaalne kõrgusklass määrab Tailwindis kõrguse atribuudi ülemise piiri. See tähendab, et see määrab elemendi maksimaalse kõrguse. Murdepunktidega minimaalse kõrgusklassi kasutamise süntaks on järgmine:
< div klass = '{murdepunkti eesliide}:max-h-{size}...' > < / div >Parema arusaamise saamiseks kasutame demonstratsioonis ülalmääratletud süntaksit. Selles näites antakse elemendile konkreetne maksimaalne kõrguspiirang „ md ” murdepunkt. See kitsendab elemendi vaikekõrgust.
< div klass = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' >Suurendage ekraani Suurus minimaalse kõrguse suurendamiseks< / div >Pange tähele, et ülaltoodud koodis on elemendi vaikekõrgus 'h-96', st 384 pikslit. Kui murdepunkt on täidetud, väheneb see kõrgus 240 piksliteni. Selle põhjuseks on ' md:max-h-60 ” klass.
Väljund:
Allolevas väljundis on selgelt näha, et kui ekraani suurus jõuab ' md ” murdepunkti, elemendi elemendi kõrgus muutub väiksemaks.
See kõik puudutab minimaalse ja maksimaalse kõrguse atribuudi määramist Tailwindi murdepunktidega.
Järeldus
Maksimaalse kõrguse atribuudi määramiseks Tailwindi murdepunktide ja meediapäringutega, {murdepunkti eesliide}:max-h-{size} ” klassi kasutatakse. Samamoodi minimaalse kõrguse atribuudi määramiseks Tailwind murdepunktidega, {murdepunkti eesliide}:min-h-{size} ” klassi kasutatakse. See artikkel pakub protseduuri minimaalse ja maksimaalse kõrguse atribuutide rakendamiseks katkestuspunktidele ja meediumipäringutele rakenduses Tailwind.