Prilikom dizajniranja responzivne web stranice, Tailwind ' Prijelomne točke ' i ' Medijski upiti ” igraju ključnu ulogu u primjeni višestrukih funkcija koje se mogu jednostavno prilagoditi različitim veličinama zaslona. Ove značajke treba specificirati putem različitih klasa, tj. md (zasloni srednje veličine)”, “lg (zaslon velike veličine)” ili putem “@media” ” pravilo koje dodaje funkcionalnosti na temelju navedenog uvjeta.
Ovaj članak pokriva sljedeći sadržaj:
- Kako primijeniti debljinu ukrasa teksta s prijelomnim točkama stražnjeg vjetra i medijskim upitima?
- Primjena debljine ukrasa teksta s prijelomnim točkama stražnjeg vjetra.
- Primjena debljine ukrasa teksta s medijskim upitima Tailwind.
Kako primijeniti debljinu ukrasa teksta s prijelomnim točkama stražnjeg vjetra i medijskim upitima?
' Debljina ukrasa teksta ' može se primijeniti uz pomoć ' tekst-ukras-debljina ” nakon čega slijedi ciljna vrijednost debljine u pikselima. Ovi pikseli mogu biti ' 1px”, “2px”, “4px” ili “8px ”. ' Prijelomne točke ' primjenjuju se za prilagodbu različitih primijenjenih funkcionalnosti u skladu s veličinom zaslona korisnika pomoću ' md (zasloni srednje veličine)”, “lg (zaslon velike veličine) ' klase, itd. ' Medijski upiti ” omogućiti stilove uvjetne implementacije na temelju skupa parametara preglednika i OS-a putem “@ medijima ' Pravilo.
Primjer 1: Primjena debljine ukrasa teksta s prijelomnim točkama stražnjeg vjetra
Ovaj primjer postavlja debljinu ukrasa teksta na različitim točkama kako bi se primijenio stil koji se razlikuje ovisno o veličini zaslona:
< html >
< glava >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< titula >< / titula >
< skripta src = 'https://cdn.tailwindcss.com' >< / skripta >
< / glava >
< tijelo >
< tekstualno područje razreda = 'podcrtano md:decoration-8 lg:box-decoration-slice text-black text-2xl' iskaznica = 'temp' > Ovo je Linuxhint < / tekstualno područje >
< / tijelo >
< / html >
U skladu s ovim isječkom koda primijenite dolje navedene korake:
- Najprije uključite CDN put za primjenu funkcija Tailwinda.
- Zatim napravite '< tekstualno područje >” i uključite navedene razine debljine ukrasa teksta na zadanim i srednjim zaslonima putem “ doktor medicine ” klase, odnosno.
- ' tekst-crna ' i ' tekst-2xl ” dodjeljuju boju (crna) i veličinu fonta tj. 2xl tekstu.
Izlaz
Iz ovog ishoda može se zaključiti da je debljina ukrasa teksta prilagođena promjenjivoj veličini zaslona na odgovarajući način.
Primjer 2: Primjena debljine ukrasa teksta s medijskim upitima Tailwind
Znak '@' medijima ” pravilo se koristi u medijskim upitima za implementaciju različitih stilova za različite vrste/uređaje medija. Ova konkretna demonstracija koristi ove medijske upite za ukrašavanje debljine teksta na temelju određenog parametra/uvjeta:
< html >
< glava >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< titula >< / titula >
< skripta src = 'https://cdn.tailwindcss.com' >< / skripta >
< / glava >
< tijelo >
< h1 iskaznica = 'temp' >Ovo je Linuxhint< / h1 >
< / tijelo >
< / html >
< stil tip = 'tekst/css' >
#temp {
tekst-ukras: podcrtano;
tekst- uskladiti : centar;
}
@ medijima ( max- širina :550 px ) {
#temp {
text-decoration-thickness: 4px;
} }
< / stil >
U ovom bloku koda razmotrite dolje navedene metodologije:
- Isto tako, uključite CDN put.
- Zatim dodajte '< h1 >” element koji ima navedeni “id”.
- U CSS dijelu koda, unutar “< stil >”, stilizirajte uključeni naslov.
- Također, stvorite '@ medijima ' pravilo koje primjenjuje uvjet tako da sve dok je širina zaslona ' 550 px ', debljina ukrasa teksta postavljena je na ' 4 ” piksela.
- Nakon što širina zaslona prijeđe ovu granicu, tekst će biti jednostavno podvučen.
Izlaz
Ovaj ishod znači da se pravilo '@media', tj. medijski upiti, primjenjuje u skladu sa širinom zaslona.
Zaključak
Prijelomne točke i medijski upiti mogu se primijeniti s debljinom ukrasa teksta za prikaz primijenjenih funkcionalnosti u skladu s veličinom zaslona korisnika koristeći različite klase kao što je ' md', 'lg ” ili putem “@ medijima ” pravilo. Potonji pristup naveden je u ' CSS ” kod koji poziva ciljni element i ukrašava ga na temelju postavljenog parametra/uvjeta. Ovaj vodič razradio je primjenu debljine ukrasa teksta uz Tailwind Breakpoint i Media Queries.