Ovaj članak će pružiti postupak za primjenu minimalne visine i maksimalne visine na Tailwind prijelomne točke i medijske upite koristeći sljedeći pregled:
- Postavljanje svojstva min-height na Tailwind prijelomnim točkama i medijskim upitima
- Postavljanje svojstva maksimalne visine na Tailwind prijelomnim točkama i medijskim upitima
Kako postaviti svojstvo minimalne visine na Tailwind prijelomnu točku i medijske upite?
Tailwind pruža zadane prijelomne točke i medijske upite kako bi dizajn bio osjetljiv na različite veličine zaslona. Svojstva navedena prijelomnim točkama primjenjuju se kada se postigne navedena veličina zaslona. Minimalna širina za ove zadane prijelomne točke opisana je kako slijedi:
- sm: Minimalna širina od '640px'.
- doktor medicine: Minimalna širina od '768px'.
- lg: Minimalna širina od '1024px'.
- xl: Minimalna širina od '1280px'.
- 2xl: Minimalna širina od '1536px'.
Svojstvo min-height postavlja donju granicu za visinu elementa. To znači da specificira minimalnu visinu koju element smije imati. Za korištenje svojstva min-height s prijelomnim točkama u Tailwindu koristi se sljedeća sintaksa:
< div razreda = '{breakpoint prefix}:min-h-{value}...' > < / div >
Upotrijebimo gore definiranu sintaksu u demonstraciji kako bismo bolje razumjeli. U ovom primjeru, ograničenje minimalne visine za element će se povećati na ' doktor medicine ” prijelomna točka. To će rezultirati povećanjem ukupne visine elementa.
< div razreda = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >Povećajte zaslon Veličina za povećanje minimalne visine< / div >
Objašnjenje gornjeg koda je sljedeće:
- ' h-48 ” pruža visinu od 192 px elementu div.
- ' w-48 ” pruža visinu od 192 px elementu div.
- ' zaobljeno-md ” klasa daje okrugli kut elementu div.
- ' bg-{boja}-{broj} ” daje navedenu boju pozadini div elementa.
- ' tekst-centar ” klasa postavlja tekstualni element u središte div elementa.
- ' md:min-h-zaslon ” klasa će povećati minimalno ograničenje visine jednako 100% visine zaslona.
Izlaz:
U izlazu se može vidjeti da kada je ' doktor medicine ” je zadovoljena veličina zaslona, element će dobiti 100% visine zaslona. To se događa jer je ograničenje minimalne visine za ' doktor medicine ” Prijelomna točka postavljena je na visinu zaslona:
Kako postaviti svojstvo maksimalne visine na Tailwind prijelomnu točku i medijske upite?
Klasa maksimalne visine postavlja gornju granicu za svojstvo visine u Tailwindu. To znači da određuje maksimalnu visinu koju element može imati. Sintaksa za korištenje klase minimalne visine s prijelomnim točkama je sljedeća:
< div razreda = '{breakpoint prefix}:max-h-{size}...' > < / div >Upotrijebimo gore definiranu sintaksu u demonstraciji kako bismo bolje razumjeli. U ovom primjeru, element će imati određeno ograničenje maksimalne visine za ' doktor medicine ” prijelomna točka. Ovo će suziti zadanu visinu dodijeljenu elementu.
< div razreda = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' >Povećajte zaslon Veličina za povećanje minimalne visine< / div >Imajte na umu da je u gornjem kodu zadana visina elementa navedena s 'h-96', tj. 384 px. Međutim, ta se visina sužava na '240px' kada se dostigne prijelomna točka 'md'. To je zbog ' md:max-h-60 ” razred.
Izlaz:
U donjem rezultatu jasno se može vidjeti da kada veličina zaslona dosegne ' doktor medicine ” prijelomna točka, visina elementa postaje manja.
To je sve o postavljanju svojstava minimalne i maksimalne visine s prijelomnim točkama Tailwinda.
Zaključak
Za postavljanje svojstva maksimalne visine s Tailwind prijelomnim točkama i medijskim upitima, ' {prefiks prijelomne točke}:max-h-{veličina} ” koristi se klasa. Slično, za postavljanje svojstva minimalne visine s prekidnim točkama Tailwind, ' {prefiks prijelomne točke}:min-h-{veličina} ” koristi se klasa. Ovaj članak pruža postupak za primjenu svojstava minimalne i maksimalne visine na prijelomne točke i medijske upite u Tailwindu.