Ovaj će članak objasniti kako koristiti prijelomnu točku i medijski upit u kombinaciji sa svojstvom položaja u Tailwindu.
Kako koristiti prijelomne točke i medijske upite sa svojstvom položaja?
Prijelomne točke ključni su blokovi za stvaranje vrhunskog responzivnog dizajna. Koristi se za prilagođavanje izgleda različitim veličinama zaslona. Medijski upiti koriste se za primjenu određenih stilova na elemente ovisno o razlučivosti zaslona. Atribut položaja može se primijeniti zajedno s njima kako bi izlaz bio optimiziraniji.
Korak 1: Primjena svojstva položaja s prijelomnim točkama i medijskim upitima
U ovom koraku umeće se program za primjenu svojstva položaja duž prijelomnih točaka ili medijskih upita preko odabranih ' str ” element:
< tijelo razreda = 'bg-slate-500' >
< div razreda = 'text-yellow-300 p-4 lg:p-8' >
< str razreda = 'relativni md:apsolutni md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > Ovaj će tekst imati različite veličine fonta ovisno o veličini zaslona. Na malim zaslonima bit će manji, na srednjim zaslonima srednje veličine, a na velikim ekranima veći. < / str >
< / div >
< / tijelo >
U ovom kodu:
- “ bg-škriljevac-500 ” postavlja boju pozadine na sivu.
- “ tekst-žuta-300 ” mijenja boju teksta u žutu.
- “ p-4 ” dodaje ispunu od 4 px.
- “ lg: p-8' dodaje ispunu od 8 piksela na velikim zaslonima.
- Početna pozicija postavlja se u odnosu na nadređenu stranicu pomoću ' relativna ” razred.
- “ md:tekst-lg ” čini tekst velikim na ekranu srednje veličine.
- “md:apsolutno” mijenja položaj teksta iz relativnog u apsolutni na ekranu srednje veličine.
- “ md:translate-x-4” i “md:translate-y-4” pomaknite tekst 4 px prema dolje i udesno na zaslonu srednje veličine.
- “ lg:tekst-xl ” mijenja veličinu teksta u iznimno veliku na velikom zaslonu.
- “ lg: statičan ” mijenja položaj teksta u odnosu na nadređenu stranicu iz apsolutnog u statičan na velikom ekranu
- “ lg:translate-x-4 ' i ' lg:translate-y-4 ” pomaknite tekst 4 px prema dolje i udesno na velikom zaslonu.
Korak 2: Provjerite izlaz
Pregledajte web stranicu stvorenu gornjim kodom i prilagodite veličinu zaslona kako biste vidjeli promjenu kao:
Može se vidjeti da tekst pokazuje responzivno ponašanje na srednjim i velikim veličinama zaslona.
Zaključak
Za korištenje prijelomnih točaka i medijskih upita u Tailwindu primijenite prijelomnu točku i postavite medijski upit na svaku prijelomnu točku, a također promijenite svojstvo položaja na različitim prijelomnim točkama na ekranu. Zadane raščlambe su ' sm ', ' doktor medicine ', ' lg ', i ' xl ”. Ovaj je blog pokazao kako koristiti prijelomnu točku i medijski upit sa svojstvom položaja u Tailwindu.