Ta članek bo zagotovil postopek za uporabo najmanjše višine in največje višine na prelomnih točkah in medijskih poizvedbah Tailwind z naslednjim orisom:
- Nastavitev lastnosti minimalne višine na prelomnih točkah in medijskih poizvedbah za zadnji veter
- Nastavitev lastnosti največje višine na prelomnih točkah in medijskih poizvedbah za zadnji veter
Kako nastaviti lastnost najmanjše višine na prelomni točki in medijskih poizvedbah Tailwind?
Tailwind zagotavlja privzete prekinitvene točke in medijske poizvedbe, da se dizajn odziva za različne velikosti zaslona. Lastnosti, podane prelomnim točkam, se uporabijo, ko je dosežena podana velikost zaslona. Najmanjša širina za te privzete prelomne točke je opisana takole:
- sm: Najmanjša širina '640px'.
- md: Najmanjša širina '768px'.
- lg: Najmanjša širina '1024px'.
- xl: Najmanjša širina '1280px'.
- 2xl: Najmanjša širina '1536px'.
Lastnost min-height nastavi spodnjo mejo za višino elementa. To pomeni, da določa najmanjšo višino, ki jo lahko ima element. Za uporabo lastnosti min-height z prelomnimi točkami v Tailwindu je uporabljena naslednja sintaksa:
< div razred = '{predpona prelomne točke}:min-h-{vrednost}...' > < / div >
Za boljše razumevanje uporabimo zgoraj definirano sintakso v predstavitvi. V tem primeru se bo minimalna omejitev višine za element povečala na ' md ” prelomna točka. To bo povzročilo povečanje celotne višine elementa.
< div razred = 'h-48 w-48 zaokroženo-md bg-zeleno-500 besedilno središče md:min-h-zaslon' > Povečaj zaslon Velikost za povečanje najmanjše višine< / div >
Razlaga zgornje kode je naslednja:
- ' h-48 ” elementu div zagotavlja višino 192 slikovnih pik.
- ' w-48 ” elementu div zagotavlja višino 192 slikovnih pik.
- ' zaobljeno-md ” zagotavlja zaobljen kot elementu div.
- ' bg-{barva}-{številka} ” zagotavlja podano barvo ozadja elementa div.
- ' besedilno središče ” postavi besedilni element na sredino elementa div.
- ' md:min-h-zaslon ” bo povečal najnižjo mejo višine na 100 % višine zaslona.
Izhod:
V izpisu je razvidno, da ko je » md ” dosežena velikost zaslona, bo element dobil 100 % višine zaslona. To se zgodi, ker je najmanjša omejitev višine za ' md ” prekinitvena točka je enaka višini zaslona:
Kako nastaviti lastnost največje višine na prelomni točki Tailwind in medijskih poizvedbah?
Razred največje višine določa zgornjo mejo za lastnost višine v Tailwindu. To pomeni, da določa največjo višino, ki jo lahko ima element. Sintaksa za uporabo razreda najmanjše višine z prelomnimi točkami je naslednja:
< div razred = '{predpona prelomne točke}:max-h-{size}...' > < / div >Za boljše razumevanje uporabimo zgoraj definirano sintakso v predstavitvi. V tem primeru bo element dobil določeno največjo omejitev višine za ' md ” prelomna točka. To bo zožilo privzeto višino, ki je podana elementu.
< div razred = 'h-96 w-48 zaokroženo-md bg-zeleno-500 besedilno središče md:max-h-60' > Povečaj zaslon Velikost za povečanje najmanjše višine< / div >Upoštevajte, da je v zgornji kodi privzeta višina elementa podana z »h-96«, tj. 384 slikovnih pik. Vendar se ta višina zoži na »240px«, ko je dosežena prelomna točka »md«. To je posledica ' md:max-h-60 ” razred.
Izhod:
V spodnjem izpisu je jasno razvidno, da ko velikost zaslona doseže ' md ” prelomna točka, se višina elementa zmanjša.
To je vse o nastavitvi lastnosti najmanjše in največje višine z prelomnimi točkami Tailwind.
Zaključek
Če želite nastaviti lastnost največje višine z prelomnimi točkami Tailwind in medijskimi poizvedbami, je » {predpona prelomne točke}:max-h-{velikost} ” se uporablja razred. Podobno, če želite nastaviti lastnost najmanjše višine z mejnimi točkami Tailwind, je ' {predpona prelomne točke}:min-h-{velikost} ” se uporablja razred. Ta članek ponuja postopek za uporabo lastnosti najmanjše in največje višine za prelomne točke in medijske poizvedbe v Tailwindu.