Mens du designer et responsivt nettsted, vil Tailwind ' Knekkpunkter ' og ' Mediespørsmål ” spiller en nøkkelrolle i å bruke flere funksjoner som enkelt kan tilpasses forskjellige skjermstørrelser. Disse funksjonene skal spesifiseres via forskjellige klasser, dvs. ' md (mellomstore skjermer)', 'lg(stor skjerm)' eller via '@media ” regel som legger til funksjonene basert på den angitte betingelsen.
Denne artikkelen dekker følgende innhold:
- Hvordan bruke tekstdekorasjonstykkelse med medvindsbruddpunkter og mediespørringer?
- Påføring av tekstdekorasjonstykkelse med medvindsbrytepunkter.
- Bruk av tekstdekorasjonstykkelsen med Tailwind Media Queries.
Hvordan bruke tekstdekorasjonstykkelse med medvindsbruddpunkter og mediespørringer?
« Tekstdekor Tykkelse ' kan brukes ved hjelp av ' tekst-dekor-tykkelse ” egenskap etterfulgt av måltykkelsesverdien i piksler. Disse pikslene kan være ' 1px', '2px', '4px' eller '8px '. « Knekkpunkter ' brukes for å tilpasse ulike anvendte funksjoner i samsvar med brukerens skjermstørrelse ved å bruke ' md (mellomstore skjermer)', 'lg (stor skjerm) ' klasser osv. ' Mediespørsmål ' aktiver betingede implementeringsstiler basert på et sett med nettleser- og OS-parametere via '@ media ' regel.
Eksempel 1: Påføring av tekstdekorasjonstykkelse med medvindsbrytepunkter
Dette eksemplet setter tekstdekorasjonstykkelsen på forskjellige punkter for å bruke stilen som varierer i henhold til skjermstørrelsene:
< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< tittel >< / tittel >
< manus src = 'https://cdn.tailwindcss.com' >< / manus >
< / hode >
< kropp >
< tekstområde klasse = 'understreke md:decoration-8 lg:box-decoration-slice tekst-svart tekst-2xl' id = 'temp' > Dette er Linuxhint < / tekstområde >
< / kropp >
< / html >
I henhold til denne kodebiten, bruk trinnene nedenfor:
- Ta først med CDN-banen for å bruke Tailwind-funksjonene.
- Deretter lager du en «< tekstområde >'-elementet og innlemme de oppgitte tekstdekorasjonstykkelsene på standard- og mellomskjermer via ' md ' klasse, henholdsvis.
- « tekst-svart ' og ' tekst-2xl ” klasser tildeler fargen (svart) og skriftstørrelsen, dvs. 2xl til teksten, henholdsvis.
Produksjon
Fra dette resultatet kan det antydes at tykkelsen på tekstdekorasjonen er tilpasset den varierende skjermstørrelsen.
Eksempel 2: Bruk av tekstdekorasjonstykkelsen med Tailwind Media Queries
«@ media regel brukes i Media Queries for å implementere ulike stiler for ulike medietyper/enheter. Denne spesielle demonstrasjonen bruker disse mediespørringene til å dekorere teksttykkelsen basert på en spesifisert parameter/tilstand:
< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< tittel >< / tittel >
< manus src = 'https://cdn.tailwindcss.com' >< / manus >
< / hode >
< kropp >
< h1 id = 'temp' >Dette er Linuxhint< / h1 >
< / kropp >
< / html >
< stil type = 'tekst/css' >
#temp {
tekst-dekorasjon: understreking;
tekst- tilpasse : senter;
}
@ media ( maks- bredde :550 piksler ) {
#temp {
tekst-dekor-tykkelse: 4px;
} }
< / stil >
I denne kodeblokken bør du vurdere metodene nedenfor:
- På samme måte inkluderer CDN-banen.
- Deretter legger du til en '< h1 >'-elementet som har oppgitt 'id'.
- I CSS-delen av koden, innenfor «< stil >”-taggen, stil den inkluderte overskriften.
- Opprett også '@ media ' regel som gjelder en betingelse slik at så lenge skjermens bredde er ' 550 piksler ', er tekstdekorasjonstykkelsen satt til ' 4 ' piksler.
- Det er slik at etter at skjermens bredde overskrider denne grensen, blir teksten ganske enkelt understreket.
Produksjon
Dette resultatet betyr at '@media'-regelen, dvs. mediesøk, brukes i samsvar med skjermens bredde.
Konklusjon
Breakpoints og Media Queries kan brukes med tekstdekorasjonstykkelse for å vise de anvendte funksjonene i samsvar med brukerens skjermstørrelse ved å bruke forskjellige klasser som ' md', 'lg ' eller via '@ media ”-regel. Sistnevnte tilnærming er spesifisert i ' CSS ” kode som påkaller målelementet og dekorerer det basert på den angitte parameteren/betingelsen. Denne veiledningen utdypet hvordan du bruker tekstdekorasjonstykkelse med Tailwind Breakpoint og Media Queries.