Ipapakita ng blog na ito ang proseso ng paglalapat ng mga media query at breakpoints gamit ang overscroll utility sa Tailwind.
Paano Mag-apply ng Media Query at Breakpoints na may Overscroll sa Tailwind?
Upang ilapat ang mga breakpoint o iba pang pangalan nito na mga query sa media pagdating sa CSS na may ' mag-overscroll ' kagamitan. Ang HTML program ay nilikha at inilalapat ang iba't ibang mga breakpoint ' sm ',' md 'o' lg ” na may angkop na mga klase ng utility mula sa utility na “overscroll”. Binabago nito ang pag-uugali ng pag-scroll ng mga item sa iba't ibang laki ng screen.
Hakbang 1: Gamitin ang Breakpoints at Media Query sa HTML code
Gumawa ng HTML na dokumento at ilapat ang mga breakpoint na siyang mga laki ng screen at media query para sa bawat breakpoint. Halimbawa' md 'at' lg Ang mga breakpoint ay ginagamit sa code sa ibaba para sa laki ng teksto at inilalapat dito ang pag-uugali ng overscroll:
< katawan klase = 'bg-slate-500' >
< div klase = 'text-red-900 p-4 lg:p-8' >
< p klase = 'relative md:absolute md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none 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. Ito magiging mas maliit sa maliliit na screen , daluyan - laki sa mga katamtamang 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-red-900 ” binabago ang kulay ng teksto sa pula.
- “ p-4 ” nagdaragdag ng padding na 4px.
- “ lg: p-8 ” nagdaragdag ng padding na 8px sa malalaking screen.
- Ang paunang posisyon ng ' Ang tag na ” ay itinakda kaugnay sa parent page sa pamamagitan ng paggamit ng “ kamag-anak ” klase.
- “ md: ganap ” baguhin ang posisyon ng teksto mula sa kamag-anak patungo sa ganap sa isang katamtamang laki ng screen.
- “ md:overscroll-contain ” tinitiyak na ang “overscroll” na gawi ay nasa loob ng elementong iyon sa halip na makaapekto sa buong page kapag ang screen ay katamtaman ang laki.
- “ md:text-lg ” ginagawang malaki ang teksto sa isang medium-sized na screen.
- “ md:translate-x-4 'at' md:translate-y-4 'ilipat ang teksto' 4px ” pababa at pakanan sa katamtamang laki ng screen.
- “ lg:overscroll-wala 'nagtatakda ng' mag-overscroll ” class property to none sa isang malaking screen.
- “ lg:text-xl ' binabago ang laki ng teksto sa sobrang laki para sa isang malaking screen.
- “ lg:static ” binabago ang posisyon ng text na may kinalaman sa parent page mula sa ganap hanggang sa static para sa isang malaking screen
- “ lg:translate-x-4 'at' lg:translate-y-4 ” ilipat ang text na 4px pababa at pakanan sa malaking laki ng screen.
Hakbang 2: I-preview ang Output
Ngayon, i-preview ang web page na nilikha sa pamamagitan ng pagpapatupad ng HTML code sa itaas at baguhin ang laki ng screen ng HTML site upang makita ang mga nakikitang pagbabago:
Sa screen sa itaas, ang ' mag-overscroll ” ang pag-uugali ay nakikita at sa pamamagitan ng pagpapaliit sa laki ng screen makikita na ang laki ng teksto ay nagbabago sa pamamagitan ng mga media query na inilapat dito.
Konklusyon
Upang ilapat ang mga query sa media at breakpoint na may ' mag-overscroll ” utility, tukuyin ang mga breakpoint na may ilang gustong klase mula sa utility na “overscroll”. Sa pamamagitan ng pag-iiba-iba ng laki ng screen, inaayos ng mga query ng media ang output ng screen. Ipinakita ng blog na ito ang proseso ng paglalapat ng mga media query at breakpoints na may 'overscroll' na gawi sa Tailwind.