Ipapaliwanag ng artikulong ito kung paano gamitin ang breakpoint at media query kasabay ng property ng posisyon sa Tailwind.
Paano Gamitin ang Breakpoints at Media Query na may Position Property?
Ang mga breakpoint ay ang mga pangunahing bloke para sa paglikha ng isang tunay na tumutugon na disenyo. Ito ay ginagamit upang gawing adaptable ang layout sa iba't ibang laki ng screen. Ginagamit ang mga query sa media upang maglapat ng mga tinukoy na istilo sa mga elemento depende sa resolution ng screen. Ang katangian ng posisyon ay maaaring ilapat kasabay ng mga ito upang gawing mas na-optimize ang output.
Hakbang 1: Paglalapat ng Position Property na may Mga Breakpoint at Media Query
Sa hakbang na ito, ipinapasok ang program upang ilapat ang property ng posisyon kasama ang mga breakpoint o mga query sa media sa napiling ' p ' elemento:
< katawan klase = 'bg-slate-500' >
< div klase = 'text-yellow-300 p-4 lg:p-8' >
< p klase = 'relative md:absolute md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > Ang tekstong ito ay magkakaroon ng iba't ibang laki ng font batay sa laki ng screen. Magiging mas maliit ito sa maliliit na screen, medium-sized sa medium screen, at mas malaki sa malalaking screen. < / p >
< / div >
< / katawan >
Sa code na ito:
- “ bg-slate-500 ” itinatakda ang kulay ng background sa grey.
- “ text-dilaw-300 ” binabago ang kulay ng teksto sa dilaw.
- “ p-4 ” nagdaragdag ng padding na 4px.
- “ lg: p-8' nagdaragdag ng padding na 8px sa malalaking screen.
- Ang paunang posisyon ay itinakda kaugnay sa parent page sa pamamagitan ng paggamit ng “ kamag-anak ” klase.
- “ md:text-lg ” ginagawang malaki ang teksto sa isang medium-sized na screen.
- “md:ganap” binabago ang posisyon ng text mula sa relatibong tungo sa absolute sa isang medium-sized na screen.
- “ md:translate-x-4” at “md:translate-y-4” ilipat ang text na 4px pababa at pakanan sa katamtamang laki ng screen.
- “ lg:text-xl ' binabago ang laki ng teksto sa sobrang laki sa isang malaking screen.
- “ lg:static ” binabago ang posisyon ng text na may kinalaman sa parent page mula sa ganap hanggang sa static sa isang malaking screen
- “ lg:translate-x-4 'at' lg:translate-y-4 ” ilipat ang text na 4px pababa at pakanan sa isang malaking laki ng screen.
Hakbang 2: I-verify ang Output
I-preview ang webpage na ginawa ng code sa itaas at isaayos ang laki ng screen upang makita ang pagbabago bilang:
Makikita na ang teksto ay nagpapakita ng tumutugon na gawi sa katamtaman at malalaking laki ng screen.
Konklusyon
Upang gumamit ng mga breakpoint at media query sa Tailwind, ilapat ang breakpoint at itakda ang media query sa bawat breakpoint, at baguhin din ang property ng posisyon sa iba't ibang breakpoint ng screen. Ang mga default na breakdown ay ' sm ',' md ',' lg ”, at “ xl ”. Ipinakita ng blog na ito kung paano gamitin ang breakpoint at media query na may property ng posisyon sa Tailwind.