Habang nagdidisenyo ng tumutugon na website, ang Tailwind ' Mga breakpoint 'at' Mga Tanong sa Media ” gumaganap ng isang mahalagang papel sa paglalapat ng maraming mga pag-andar na maaaring iakma sa iba't ibang laki ng screen nang maginhawa. Ang mga tampok na ito ay dapat tukuyin sa pamamagitan ng iba't ibang klase i.e., ' md (mga katamtamang laki ng screen)”, “lg(malaking laki ng screen)” o sa pamamagitan ng “@media ” panuntunan na nagdaragdag ng mga functionality batay sa tinukoy na kundisyon.
Sinasaklaw ng artikulong ito ang sumusunod na nilalaman:
- Paano Ilapat ang Kapal ng Dekorasyon ng Teksto sa Mga Tailwind Breakpoint at Mga Query sa Media?
- Paglalapat ng Kapal ng Dekorasyon ng Teksto na may mga Tailwind Breakpoints.
- Paglalapat ng Kapal ng Dekorasyon ng Teksto gamit ang Tailwind Media Query.
Paano Ilapat ang Kapal ng Dekorasyon ng Teksto sa Mga Tailwind Breakpoint at Mga Query sa Media?
Ang ' Dekorasyon ng teksto Kapal 'maaaring ilapat sa tulong ng' kapal ng text-decoration ” property na sinusundan ng halaga ng target na kapal sa mga pixel. Ang mga pixel na ito ay maaaring ' 1px', '2px', '4px' o '8px ”. Ang ' Mga breakpoint ' ay inilapat upang iakma ang iba't ibang mga inilapat na functionality alinsunod sa laki ng screen ng user gamit ang ' md (mga katamtamang laki ng screen)', 'lg(malaking laki ng screen) 'mga klase, atbp. Ang ' Mga Tanong sa Media ” paganahin ang mga istilo ng pagpapatupad ng kondisyon batay sa isang hanay ng mga parameter ng browser at OS sa pamamagitan ng “@ media ” tuntunin.
Halimbawa 1: Paglalapat ng Text Dekorasyon Thickness na may Tailwind Breakpoints
Itinatakda ng halimbawang ito ang kapal ng dekorasyon ng teksto sa iba't ibang mga punto upang ilapat ang estilo na nag-iiba ayon sa mga laki ng screen:
< html >
< ulo >
< meta charset = 'utf-8' >
< meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1' >
< pamagat >< / pamagat >
< script src = 'https://cdn.tailwindcss.com' >< / script >
< / ulo >
< katawan >
< textarea klase = 'underline md:decoration-8 lg:box-decoration-slice text-black text-2xl' id = 'temp' > Ito ay Linuxhint < / textarea >
< / katawan >
< / html >
Ayon sa snippet ng code na ito, ilapat ang mga hakbang na ibinigay sa ibaba:
- Una, isama ang CDN path para ilapat ang mga functionality ng Tailwind.
- Pagkatapos, gumawa ng '< textarea >” elemento at isama ang nakasaad na mga antas ng kapal ng dekorasyon ng teksto sa default at katamtamang mga screen sa pamamagitan ng “ md ” klase, ayon sa pagkakasunod.
- Ang ' text-black 'at' teksto-2xl Ang mga klase ay naglalaan ng kulay (itim) at ang laki ng font i.e., 2xl sa teksto, ayon sa pagkakabanggit.
Output
Mula sa kinalabasan na ito, maaaring ipahiwatig na ang kapal ng text-dekorasyon ay iniangkop sa iba't ibang laki ng screen nang naaangkop.
Halimbawa 2: Paglalapat ng Text Dekorasyon Thickness sa Tailwind Media Query
Ang “@ media Ginagamit ang panuntunan sa Media Query para ipatupad ang iba't ibang istilo para sa iba't ibang uri/device ng media. Ginagamit ng partikular na demonstrasyon na ito ang mga query sa media na ito upang palamutihan ang kapal ng teksto batay sa isang tinukoy na parameter/kondisyon:
< html >
< ulo >
< meta charset = 'utf-8' >
< meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1' >
< pamagat >< / pamagat >
< script src = 'https://cdn.tailwindcss.com' >< / script >
< / ulo >
< katawan >
< h1 id = 'temp' >Ito ang Linuxhint< / h1 >
< / katawan >
< / html >
< istilo uri = 'text/css' >
#temp {
text-dekorasyon: salungguhitan;
text- ihanay : gitna;
}
@ media ( max- lapad :550px ) {
#temp {
kapal ng text-decoration: 4px;
} }
< / istilo >
Sa block ng code na ito, isaalang-alang ang mga pamamaraan na ibinigay sa ibaba:
- Gayundin, isama ang landas ng CDN.
- Pagkatapos, magdagdag ng '< h1 >” elementong mayroong nakasaad na “id”.
- Sa bahagi ng CSS ng code, sa loob ng '< istilo >” tag, i-istilo ang kasamang heading.
- Gayundin, lumikha ng “@ media ” panuntunang naglalapat ng kundisyon tulad na hangga’t ang lapad ng screen ay “ 550px ”, nakatakda ang kapal ng text-decoration sa “ 4 ” mga pixel.
- Ito ay tulad na pagkatapos na lumampas ang lapad ng screen sa limitasyong ito, ang teksto ay salungguhitan lamang.
Output
Ang kinalabasan na ito ay nagpapahiwatig na ang panuntunang '@media' ibig sabihin, ang Mga Query sa Media ay inilapat alinsunod sa lapad ng screen.
Konklusyon
Maaaring ilapat ang Mga Breakpoint at Media Query sa kapal ng dekorasyon ng teksto upang ipakita ang mga inilapat na pag-andar alinsunod sa laki ng screen ng user gamit ang iba't ibang klase tulad ng ' md', 'lg ” o sa pamamagitan ng “@ media ” panuntunan, ayon sa pagkakabanggit. Ang huling diskarte ay tinukoy sa ' CSS ” code na nagpapatawag ng target na elemento at pinalamutian ito batay sa nakatakdang parameter/kondisyon. Ang gabay na ito ay nagpapaliwanag sa paglalapat ng kapal ng dekorasyon ng teksto sa Tailwind Breakpoint at Mga Query sa Media.