Denne artikkelen vil gi fremgangsmåten for å bruke minimumshøyde og maksimumshøyde på medvindsbruddpunkter og mediespørringer ved å bruke følgende oversikt:
- Angi Min-høyde-eiendom på medvindsbruddpunkter og medieforespørsler
- Angi Maks-høyde-egenskap på medvindsbruddpunkter og medieforespørsler
Hvordan angi min-høyde-eiendom på Tailwind Breakpoint & Media Queries?
Tailwind gir standard bruddpunkter og mediespørringer for å gjøre designet responsivt for forskjellige skjermstørrelser. Egenskapene gitt til bruddpunktene brukes når den angitte skjermstørrelsen er oppfylt. Minimumsbredden for disse standardbruddpunktene er beskrevet som følger:
- sm: Minste bredde på '640px'.
- md: Minste bredde på '768px'.
- lg: Minste bredde på '1024px'.
- xl: Minste bredde på '1280px'.
- 2xl: Minste bredde på '1536px'.
Egenskapen min-høyde angir den nedre grensen for høyden til et element. Dette betyr at den spesifiserer minimumshøyden et element har lov til å ha. For å bruke min-height-egenskapen med bruddpunktene i Tailwind, brukes følgende syntaks:
< div klasse = '{breakpoint prefix}:min-h-{value}...' > < / div >
La oss bruke den ovenfor definerte syntaksen i en demonstrasjon for å få en bedre forståelse. I dette eksemplet vil minimumshøydegrensen for elementet øke på ' md ' bruddpunkt. Dette vil resultere i å øke den totale høyden på elementet.
< div klasse = 'h-48 w-48 avrundet-md bg-grønn-500 tekstsenter md:min-h-skjerm' >Øk skjermen Størrelse for å øke minimumshøyden< / div >
Forklaringen for koden ovenfor er som følger:
- « h-48 ”-klassen gir en høyde på 192px til div-elementet.
- « w-48 ”-klassen gir en høyde på 192px til div-elementet.
- « avrundet-md ” klasse gir det runde hjørnet til div-elementet.
- « bg-{color}-{number} ”-klassen gir den angitte fargen til bakgrunnen til div-elementet.
- « tekst-senter ” klasse plasserer tekstelementet til midten av div-elementet.
- « md:min-h-skjerm ” klasse vil øke minimumshøydegrensen lik 100 % skjermhøyde.
Produksjon:
Det kan sees i utgangen at når ' md ” skjermstørrelsen er oppfylt, vil elementet få 100 % av skjermhøyden. Dette skjer fordi minimumshøydegrensen for ' md ” brytepunkt settes lik skjermhøyden:
Hvordan angi maks-høyde-eiendom på medvindsbruddpunkt og medieforespørsler?
Maksimal høydeklasse setter øvre grense for høydeegenskapen i Tailwind. Dette betyr at den spesifiserer den maksimale høyden et element kan ha. Syntaksen for å bruke minimumshøydeklassen med bruddpunkter er som følger:
< div klasse = '{breakpoint prefix}:max-h-{size}...' > < / div >La oss bruke den ovenfor definerte syntaksen i en demonstrasjon for å få en bedre forståelse. I dette eksemplet vil elementet være utstyrt med en spesifikk maksimal høydegrense for ' md ' bruddpunkt. Dette vil begrense standardhøyden gitt til elementet.
< div klasse = 'h-96 w-48 avrundet-md bg-grønn-500 tekstsenter md:max-h-60' >Øk skjermen Størrelse for å øke minimumshøyden< / div >Merk at i koden ovenfor er standardhøyden til et element utstyrt med 'h-96', dvs. 384px. Denne høyden avtar imidlertid til '240px' når 'md'-bruddpunktet er nådd. Dette er på grunn av ' md:max-h-60 ' klasse.
Produksjon:
I utgangen nedenfor kan det tydelig sees at når skjermstørrelsen når ' md ” bruddpunkt, blir elementhøyden til elementet mindre.
Det handler om å angi egenskapen minimum og maksimum høyde med Tailwind breakpoints.
Konklusjon
For å angi egenskapen for maksimal høyde med Tailwind-bruddpunktene og mediespørringene, ' {breakpoint prefix}:max-h-{size} ” klasse brukes. På samme måte, for å angi egenskapen minimum høyde med Tailwind-bruddpunktene, ' {breakpoint prefix}:min-t-{størrelse} ” klasse brukes. Denne artikkelen har gitt fremgangsmåten for å bruke min- og maks-høyde-egenskaper på bruddpunkter og mediespørringer i Tailwind.