Mens du designer et responsivt websted, vil Tailwind ' Knækpunkter ' og ' Medieforespørgsler ” spiller en nøglerolle i anvendelsen af flere funktioner, der bekvemt kan tilpasses forskellige skærmstørrelser. Disse funktioner skal specificeres via forskellige klasser, dvs. md (mellemstore skærme)', 'lg(stor skærm)' eller via '@media ” regel, der tilføjer funktionaliteterne baseret på den angivne betingelse.
Denne artikel dækker følgende indhold:
- Hvordan anvender man tekstdekorationstykkelse med medvindsbrudpunkter og medieforespørgsler?
- Anvendelse af tekstdekorationstykkelsen med medvindsbrudpunkter.
- Anvendelse af tekstdekorationstykkelsen med Tailwind Media Queries.
Hvordan anvender man tekstdekorationstykkelse med medvindsbrudpunkter og medieforespørgsler?
Det ' Tekstdekoration Tykkelse ' kan anvendes ved hjælp af ' tekst-dekoration-tykkelse ” egenskab efterfulgt af måltykkelsesværdien i pixels. Disse pixels kan være ' 1px', '2px', '4px' eller '8px ”. Det ' Knækpunkter ' anvendes til at tilpasse forskellige anvendte funktionaliteter i overensstemmelse med brugerens skærmstørrelse ved hjælp af ' md (mellemstore skærme)', 'lg (stor skærm) ' klasser osv. ' Medieforespørgsler ' aktivere betingede implementeringsstile baseret på et sæt browser- og OS-parametre via '@ medier ' Herske.
Eksempel 1: Anvendelse af tekstdekorationstykkelsen med medvindsbrudpunkter
Dette eksempel indstiller tekstdekorationstykkelsen på forskellige punkter for at anvende stilen, der varierer i henhold til skærmstørrelserne:
< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< titel >< / titel >
< manuskript src = 'https://cdn.tailwindcss.com' >< / manuskript >
< / hoved >
< legeme >
< tekstområde klasse = 'understreget md:decoration-8 lg:box-decoration-slice text-sort text-2xl' id = 'Midlertidig' > Dette er Linuxhint < / tekstområde >
< / legeme >
< / html >
I henhold til dette kodestykke skal du anvende nedenstående trin:
- Inkluder først CDN-stien for at anvende Tailwind-funktionaliteterne.
- Lav derefter en '< tekstområde >'-elementet og inkorporer de angivne tekstdekorationstykkelsesniveauer på standard- og mellemskærme via ' md henholdsvis ”klasse.
- Det ' tekst-sort ' og ' tekst-2xl ” klasser tildeler farven (sort) og skriftstørrelsen, dvs. 2xl til teksten.
Produktion
Ud fra dette resultat kan det antydes, at tekst-dekorationstykkelsen er tilpasset den varierende skærmstørrelse passende.
Eksempel 2: Anvendelse af tekstdekorationstykkelsen med Tailwind Media Queries
Det '@ medier reglen bruges i Media Queries til at implementere forskellige stilarter for forskellige medietyper/enheder. Denne særlige demonstration bruger disse medieforespørgsler til at dekorere teksttykkelsen baseret på en specificeret parameter/tilstand:
< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< titel >< / titel >
< manuskript src = 'https://cdn.tailwindcss.com' >< / manuskript >
< / hoved >
< legeme >
< h1 id = 'Midlertidig' >Dette er Linuxhint< / h1 >
< / legeme >
< / html >
< stil type = 'tekst/css' >
#Midlertidig {
tekst-dekoration: understregning;
tekst- justere : center;
}
@ medier ( max- bredde :550px ) {
#Midlertidig {
tekst-dekoration-tykkelse: 4px;
} }
< / stil >
Overvej nedenstående metoder i denne kodeblok:
- På samme måde skal du inkludere CDN-stien.
- Tilføj derefter en '< h1 >' element med det angivne 'id'.
- I CSS-delen af koden, inden for '< stil >” tag, stil den inkluderede overskrift.
- Opret også '@ medier ' regel, der anvender en betingelse, så længe skærmens bredde er ' 550 px ', er tekst-dekorationstykkelsen indstillet til ' 4 ' pixels.
- Det er sådan, at efter at skærmens bredde overskrider denne grænse, vil teksten blot blive understreget.
Produktion
Dette resultat betyder, at '@media'-reglen, dvs. Media Queries, anvendes i overensstemmelse med skærmens bredde.
Konklusion
Breakpoints og Media Queries kan anvendes med tekstdekorationstykkelse for at vise de anvendte funktioner i overensstemmelse med brugerens skærmstørrelse ved hjælp af forskellige klasser såsom ' md', 'lg ' eller via '@ medier ” reglen, hhv. Sidstnævnte tilgang er specificeret i ' CSS ” kode, der påkalder målelementet og dekorerer det baseret på den indstillede parameter/tilstand. Denne vejledning har uddybet påføring af tekstdekorationstykkelse med Tailwind Breakpoint og Media Queries.