Sa Tailwind CSS, ang “ box-dekorasyon-break Tinutukoy ng property ng ” ang pag-render ng background, border, at padding ng isang elemento kapag sumasaklaw ito ng maraming linya o column. Mayroon itong dalawang klase i.e., ' hiwain 'at' clone ”. Maaaring gamitin ng mga user ang property na 'box-decoration-break' na may mga breakpoint at media query para matukoy kung paano nagbabago ang layout at hitsura ng mga elemento depende sa lapad ng device at maglapat ng iba't ibang istilo batay sa mga breakpoint.
Ipapakita ng artikulong ito ang paraan ng paggamit ng box decoration break na may mga breakpoint at mga query sa media.
Paano Gamitin ang Box Decoration Break Sa Mga Breakpoint at Media Query sa Tailwind?
Para gumamit ng box decoration break na may mga breakpoint at media query, kinakailangan na tukuyin ang iba't ibang value at styling para sa iba't ibang laki ng screen sa HTML program. Pagkatapos, tingnan ang web page sa pamamagitan ng pagpapatakbo ng HTML program para sa pag-verify.
Para sa isang mas mahusay na pag-unawa, tingnan ang mga nabanggit na hakbang sa ibaba:
Hakbang 1: Gumamit ng Mga Breakpoint at Mga Query sa Media Gamit ang Box Dekorasyon Break
Gumawa ng HTML program at tumukoy ng iba't ibang value at styling para sa iba't ibang laki ng screen. Halimbawa, tinukoy namin ang ' md 'at' lg ” breakpoints sa kanilang mga styling:
< katawan >< span klase = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Kamusta < br />
Linux < br />
Pahiwatig
span >
katawan >
dito:
- “ bg-teal-600 ” itinatakda ang teal na kulay sa background.
- “ box-decoration-clone ” ay isang custom na klase na ginagamit para sa pag-clone ng box na dekorasyon.
- “ md:bg-dilaw-500 ' naglalapat ng dilaw na kulay ng background sa na elemento para sa ' md ” breakpoint (mga medium-sized na screen).
- “ lg:box-decoration-slice Ang ” ay nagtatakda ng epekto ng paghiwa sa dekorasyon ng kahon para sa “ lg ” breakpoint (malalaking screen).
- “ text-white ” itinatakda ang puting kulay sa teksto.
- “ teksto-3xl ” itinatakda ang laki ng font sa 3xl.
- “ px-2 ” nagdaragdag ng pahalang na padding na 2 pixels sa na elemento.
Hakbang 2: I-verify ang Output
Upang matiyak na matagumpay na nailapat ang mga breakpoint at media query, patakbuhin ang HTML program, at tingnan ang web page:
Ito ay makikita na ang web page ay nagbabago ayon sa kung saan ang breakpoints at media query ay tinukoy.
Konklusyon
Para gumamit ng box decoration break na may mga breakpoint at media query sa Tailwind, gumawa muna ng HTML file. Pagkatapos, gamitin ang mga breakpoint at media query sa HTML program sa pamamagitan ng pagtukoy ng iba't ibang value at styling para sa iba't ibang laki ng screen. Para sa pag-verify, patakbuhin ang HTML program at tingnan ang web page. Ipinakita ng artikulong ito ang paraan ng paggamit ng box decoration break na may mga breakpoint at mga query sa media.