În timp ce proiectează un site web receptiv, Tailwind „ Puncte de întrerupere ' și ' Interogări media ” joacă un rol cheie în aplicarea mai multor funcționalități care pot fi adaptate la diferite dimensiuni de ecran în mod convenabil. Aceste caracteristici trebuie specificate prin diferite clase, adică „ md (ecrane de dimensiuni medii)”, „lg (ecran de dimensiuni mari)” sau prin intermediul „@media ” regulă care anexează funcționalitățile în funcție de condiția specificată.
Acest articol acoperă următorul conținut:
- Cum să aplicați grosimea decorului textului cu punctele de întrerupere ale vântului de coadă și interogări media?
- Aplicarea grosimii decorului textului cu punctele de întrerupere ale vântului din coadă.
- Aplicarea grosimii decorului textului cu interogări media Tailwind.
Cum să aplicați grosimea decorului textului cu punctele de întrerupere ale vântului de coadă și interogări media?
„ Decorarea textului Grosimea ” poate fi aplicat cu ajutorul „ text-decor-grosime ” urmată de valoarea grosimii țintă în pixeli. Acești pixeli pot fi „ 1px”, „2px”, „4px” sau „8px ”. „ Puncte de întrerupere ” sunt aplicate pentru a adapta diferite funcționalități aplicate în conformitate cu dimensiunea ecranului utilizatorului, folosind „ md (ecran de dimensiuni medii)”, „lg (ecran de dimensiuni mari) ” clase, etc. Interogări media ” permite stiluri de implementare condiționată bazate pe un set de parametri de browser și OS prin intermediul „@ mass-media ” regula.
Exemplul 1: aplicarea grosimii decorului textului cu puncte de întrerupere ale vântului din coadă
Acest exemplu setează grosimea decorului textului în diferite puncte pentru a aplica stilul care variază în funcție de dimensiunile ecranului:
< html >
< cap >
< meta set de caractere = 'utf-8' >
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1” >
< titlu >< / titlu >
< scenariu src = „https://cdn.tailwindcss.com” >< / scenariu >
< / cap >
< corp >
< zona textului clasă = „subliniere md:decoration-8 lg:box-decoration-slice text-black text-2xl” id = 'temp' > Acesta este Linuxhint < / zona textului >
< / corp >
< / html >
Conform acestui fragment de cod, aplicați pașii de mai jos:
- Mai întâi, includeți calea CDN pentru a aplica funcționalitățile Tailwind.
- Apoi, faceți un „< zona textului >” și încorporează nivelurile de grosime a decorului textului declarate la ecranele implicite și medii prin intermediul „ md ”, respectiv clasa.
- „ text-negru ' și ' text-2xl clasele ” alocă culoarea (negru) și dimensiunea fontului, adică 2xl textului.
Ieșire
Din acest rezultat, se poate presupune că grosimea decorului textului este adaptată în mod corespunzător la dimensiunea variabilă a ecranului.
Exemplul 2: Aplicarea grosimii decorului textului cu interogări media Tailwind
„@ mass-media ” regula este utilizată în Interogări media pentru a implementa diferite stiluri pentru diferite tipuri/dispozitive media. Această demonstrație specială folosește aceste interogări media pentru a decora grosimea textului pe baza unui parametru/condiție specificat:
< html >
< cap >
< meta set de caractere = 'utf-8' >
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1” >
< titlu >< / titlu >
< scenariu src = „https://cdn.tailwindcss.com” >< / scenariu >
< / cap >
< corp >
< h1 id = 'temp' >Acesta este Linuxhint< / h1 >
< / corp >
< / html >
< stil tip = „text/css” >
#temp {
text-decor: subliniere;
text- alinia : centru;
}
@ mass-media ( max- lăţime :550px ) {
#temp {
text-decor-grosime: 4px;
} }
< / stil >
În acest bloc de cod, luați în considerare metodologiile furnizate mai jos:
- De asemenea, includeți calea CDN.
- Apoi, adăugați un „< h1 >” element având „id” declarat.
- În partea CSS a codului, în cadrul „< stil >” etichetă, stilați titlul inclus.
- De asemenea, creați „@ mass-media ” regulă care aplică o condiție astfel încât atâta timp cât lățimea ecranului este ” 550px ”, grosimea decorului-text este setată la „ 4 ” pixeli.
- Este de așa natură încât, după ce lățimea ecranului depășește această limită, textul va fi pur și simplu subliniat.
Ieșire
Acest rezultat înseamnă că regula „@media”, adică interogări media este aplicată în conformitate cu lățimea ecranului.
Concluzie
Punctele de întrerupere și interogările media pot fi aplicate cu grosimea decorului textului pentru a afișa funcționalitățile aplicate în conformitate cu dimensiunea ecranului utilizatorului, folosind diferite clase, cum ar fi „ md', 'lg ” sau prin „@ mass-media ” regula, respectiv. Ultima abordare este specificată în „ CSS ” cod care invocă elementul țintă și îl decorează în funcție de parametrul/condiția setat. Acest ghid a elaborat despre aplicarea grosimii decorului textului cu Tailwind Breakpoint și Media Queries.