„Tailwind CSS“ dėžutė-dekoravimas-pertrauka ypatybė nustato elemento fono, kraštinės ir užpildymo atvaizdavimą, kai jis apima kelias eilutes arba stulpelius. Jis turi dvi klases, t. y. „ gabalas “ ir „ klonas “. Vartotojai gali naudoti ypatybę „box-decoration-break“ su lūžio taškais ir medijos užklausomis, kad nustatytų, kaip keičiasi elementų išdėstymas ir išvaizda, atsižvelgiant į įrenginio plotį, ir pritaikyti skirtingus stilius pagal lūžio taškus.
Šiame straipsnyje bus parodytas dėžutės dekoravimo pertraukos su lūžio taškais ir medijos užklausų naudojimo būdas.
Kaip naudoti dėžutės dekoravimo pertrauką su lūžio taškais ir žiniasklaidos užklausomis „Tailwind“?
Norint naudoti dėžutės dekoravimo pertrauką su lūžio taškais ir medijos užklausomis, HTML programoje reikia apibrėžti skirtingas reikšmes ir stilių skirtingiems ekrano dydžiams. Tada peržiūrėkite tinklalapį paleisdami HTML programą, kad patikrintumėte.
Norėdami geriau suprasti, peržiūrėkite toliau nurodytus veiksmus.
1 veiksmas: naudokite lūžio taškus ir medijos užklausas su dėžutės dekoravimo pertrauka
Sukurkite HTML programą ir nurodykite skirtingas reikšmes bei stilių skirtingiems ekrano dydžiams. Pavyzdžiui, mes apibrėžėme „ md “ ir „ lg “ lūžio taškai su jų stiliais:
< kūnas >< tarpas klasė = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Sveiki < br />
Linux < br />
Užuomina
tarpas >
kūnas >
Čia:
- “ bg-teal-600 “ nustato melsvą spalvą į foną.
- “ dėžutė-dekoracija-klonas “ yra pasirinktinė klasė, naudojama klonavimo dėžutės dekoravimui.
- “ md:bg-geltonas-500 “ taiko geltoną fono spalvą elementui „ md ” lūžio taškas (vidutinio dydžio ekranai).
- “ lg:box-decoration-slice “ nustato pjaustymo efektą dėžutės dekoravimui lg ” lūžio taškas (dideli ekranai).
- “ tekstas-baltas “ nustato baltą teksto spalvą.
- “ tekstas-3xl “ nustato šrifto dydį į 3xl.
- “ px-2 “ prideda horizontalų 2 pikselių užpildymą elementui.
2 veiksmas: patikrinkite išvestį
Norėdami įsitikinti, kad lūžio taškai ir medijos užklausos buvo sėkmingai pritaikytos, paleiskite HTML programą ir peržiūrėkite tinklalapį:
Matyti, kad keičiasi tinklalapis, pagal kurį buvo apibrėžiami lūžio taškai ir medijos užklausos.
Išvada
Norėdami naudoti dėžutės dekoravimo pertrauką su lūžio taškais ir medijos užklausomis programoje Tailwind, pirmiausia sukurkite HTML failą. Tada naudokite pertraukos taškus ir medijos užklausas HTML programoje nurodydami skirtingas reikšmes ir stilių skirtingiems ekrano dydžiams. Norėdami patikrinti, paleiskite HTML programą ir peržiūrėkite tinklalapį. Šiame straipsnyje parodytas dėžutės dekoravimo pertraukos su lūžio taškais ir medijos užklausų naudojimo būdas.