Kurdamas interaktyvią svetainę, „Tailwind“ Lūžio taškai “ ir „ Žiniasklaidos užklausos “ vaidina pagrindinį vaidmenį taikant kelias funkcijas, kurias galima patogiai pritaikyti skirtingiems ekrano dydžiams. Šios funkcijos turi būti nurodytos per įvairias klases, ty „ md (vidutinio dydžio ekranai)“, „lg (didelio dydžio ekranas)“ arba per „@media“ “ taisyklė, kuri prideda funkcijas pagal nurodytą sąlygą.
Šis straipsnis apima šį turinį:
- Kaip pritaikyti teksto dekoravimo storį tailwind lūžio taškams ir medijos užklausoms?
- Teksto dekoravimo storio taikymas tailwind lūžio taškais.
- Teksto dekoravimo storio taikymas naudojant „Tailwind Media“ užklausas.
Kaip pritaikyti teksto dekoravimo storį tailwind lūžio taškams ir medijos užklausoms?
„ Teksto dekoravimas Storis “ galima pritaikyti naudojant „ tekstas-dekoracija-storis “ savybę, po kurios nurodoma tikslinio storio reikšmė pikseliais. Šie pikseliai gali būti ' 1px, 2px, 4px arba 8px “. „ Lūžio taškai “ yra pritaikyti įvairioms taikomoms funkcijoms pritaikyti pagal vartotojo ekrano dydį, naudojant „ md (vidutinio dydžio ekranai)“, „lg (didelio dydžio ekranai) “ klasės ir tt “ Žiniasklaidos užklausos “ įgalinkite sąlyginius diegimo stilius, pagrįstus naršyklės ir OS parametrų rinkiniu, naudodami „@ žiniasklaida “ taisyklė.
1 pavyzdys: Teksto dekoravimo storio taikymas su galinio vėjo lūžio taškais
Šiame pavyzdyje teksto dekoravimo storis nustatomas skirtinguose taškuose, kad būtų pritaikytas stilius, kuris skiriasi priklausomai nuo ekrano dydžių:
< html >
< galva >
< meta simbolių rinkinys = 'utf-8' >
< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >
< titulą >< / titulą >
< scenarijus src = 'https://cdn.tailwindcss.com' >< / scenarijus >
< / galva >
< kūnas >
< teksto sritis klasė = 'pabraukti md:dekoracija-8 lg:box-decoration-slice text-black text-2xl' id = 'temp.' > Tai yra Linuxhint < / teksto sritis >
< / kūnas >
< / html >
Remdamiesi šiuo kodo fragmentu, atlikite toliau nurodytus veiksmus.
- Pirmiausia įtraukite CDN kelią, kad pritaikytumėte „Tailwind“ funkcijas.
- Tada padarykite „< teksto sritis >“ elementą ir įtraukite nurodytus teksto dekoravimo storio lygius numatytuosiuose ir vidutiniuose ekranuose naudodami „ md “ klasė, atitinkamai.
- „ tekstas-juodas “ ir „ tekstas-2xl ” klasės tekstui atitinkamai paskiria spalvą (juodą) ir šrifto dydį, ty 2xl.
Išvestis
Iš šio rezultato galima numanyti, kad teksto dekoravimo storis yra tinkamai pritaikytas prie įvairaus ekrano dydžio.
2 pavyzdys: teksto dekoravimo storio taikymas su Tailwind medijos užklausomis
„@“ žiniasklaida “ taisyklė naudojama medijos užklausose, siekiant įgyvendinti įvairius stilius skirtingiems medijos tipams / įrenginiams. Šioje konkrečioje demonstracijoje naudojamos šios medijos užklausos, kad papuoštų teksto storį pagal nurodytą parametrą / sąlygą:
< html >
< galva >
< meta simbolių rinkinys = 'utf-8' >
< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >
< titulą >< / titulą >
< scenarijus src = 'https://cdn.tailwindcss.com' >< / scenarijus >
< / galva >
< kūnas >
< h1 id = 'temp.' >Tai yra „Linuxhint“< / h1 >
< / kūnas >
< / html >
< stilius tipo = 'text/css' >
#temp {
tekstas-dekoravimas: pabraukimas;
tekstas- lygiuotis : centras;
}
@ žiniasklaida ( max- plotis :550px ) {
#temp {
tekstas-dekoracija-storis: 4px;
} }
< / stilius >
Šiame kodo bloke apsvarstykite toliau pateiktas metodikas:
- Taip pat įtraukite CDN kelią.
- Tada pridėkite „< h1 >“ elementą, turintį nurodytą „id“.
- CSS kodo dalyje „< stilius >“ žymą, stilizuokite įtrauktą antraštę.
- Taip pat sukurkite „@ žiniasklaida “ taisyklė, kuri taiko sąlygą, kad tol, kol ekrano plotis yra „ 550 taškų “, teksto dekoravimo storis nustatytas į „ 4 “ pikselių.
- Tai yra tokia, kad ekrano pločiui viršijus šią ribą tekstas bus tiesiog pabrauktas.
Išvestis
Šis rezultatas reiškia, kad „@media“ taisyklė, t. y. medijos užklausos, taikomos atsižvelgiant į ekrano plotį.
Išvada
Lūžio taškai ir medijos užklausos gali būti pritaikytos su teksto dekoravimo storiu, kad būtų rodomos taikomos funkcijos, atsižvelgiant į vartotojo ekrano dydį, naudojant įvairias klases, pvz., ' md“, „lg “ arba per „@“ žiniasklaida “ taisyklė. Pastarasis metodas nurodytas „ CSS “ kodas, kuris iškviečia tikslinį elementą ir papuošia jį pagal nustatytą parametrą / sąlygą. Šiame vadove išsamiai aprašomas teksto dekoravimo storio taikymas naudojant „Tailwind Breakpoint“ ir „Media Queries“.