Veidojot adaptīvu vietni, Tailwind ' Pārtraukuma punkti ' un ' Multivides vaicājumi ” spēlē galveno lomu, piemērojot vairākas funkcijas, kuras var ērti pielāgot dažādiem ekrāna izmēriem. Šīs funkcijas ir jānorāda, izmantojot dažādas klases, t.i., ' md (vidēja izmēra ekrāni)”, “lg (liela izmēra ekrāns)” vai izmantojot “@media ” kārtula, kas pievieno funkcionalitātes, pamatojoties uz norādīto nosacījumu.
Šis raksts aptver šādu saturu:
- Kā izmantot teksta dekorēšanas biezumu, izmantojot aizvēja pārtraukuma punktus un multivides vaicājumus?
- Teksta dekorācijas biezuma pielietošana ar aizvēja pārtraukuma punktiem.
- Teksta noformējuma biezuma pielietošana ar Tailwind Media vaicājumiem.
Kā izmantot teksta dekorēšanas biezumu, izmantojot aizvēja pārtraukuma punktus un multivides vaicājumus?
' Teksta apdare Biezums ' var lietot, izmantojot ' teksts-dekorācija-biezums ” rekvizītu, kam seko mērķa biezuma vērtība pikseļos. Šie pikseļi var būt ' 1px, 2px, 4px vai 8px ”. ' Pārtraukuma punkti ” tiek lietoti, lai pielāgotu dažādas lietotās funkcijas atbilstoši lietotāja ekrāna izmēram, izmantojot md (vidēja izmēra ekrāni)', 'lg (liela izmēra ekrāns) ” nodarbības utt. Multivides vaicājumi ” iespējot nosacījuma ieviešanas stilus, pamatojoties uz pārlūkprogrammas un OS parametru kopu, izmantojot simbolu “@ plašsaziņas līdzekļi ” noteikums.
Piemērs 1: Teksta dekorācijas biezuma pielietošana ar aizvēja pārtraukuma punktiem
Šajā piemērā ir iestatīts teksta dekorācijas biezums dažādos punktos, lai piemērotu stilu, kas mainās atkarībā no ekrāna izmēriem:
< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< virsraksts >< / virsraksts >
< skripts src = 'https://cdn.tailwindcss.com' >< / skripts >
< / galvu >
< ķermeni >
< teksta apgabals klasē = 'pasvītrot md:decoration-8 lg:box-decoration-slice text-black text-2xl' id = 'temp' > Tas ir Linuxhint < / teksta apgabals >
< / ķermeni >
< / html >
Saskaņā ar šo koda fragmentu veiciet tālāk norādītās darbības.
- Pirmkārt, iekļaujiet CDN ceļu, lai lietotu Tailwind funkcijas.
- Pēc tam izveidojiet “< teksta apgabals >” elementu un iekļaujiet norādītos teksta dekorācijas biezuma līmeņus noklusējuma un vidējos ekrānos, izmantojot md ” klasē, attiecīgi.
- ' teksts-melns ' un ' teksts-2xl ” klases piešķir tekstam attiecīgi krāsu (melnu) un fonta lielumu, t.i., 2xl.
Izvade
No šī rezultāta var secināt, ka teksta dekorācijas biezums ir atbilstoši pielāgots mainīgajam ekrāna izmēram.
2. piemērs. Teksta dekorācijas biezuma izmantošana ar Tailwind Media vaicājumiem
“@” plašsaziņas līdzekļi Noteikums tiek izmantots multivides vaicājumos, lai ieviestu dažādus stilus dažādiem multivides veidiem/ierīcēm. Šajā konkrētajā demonstrācijā tiek izmantoti šie multivides vaicājumi, lai dekorētu teksta biezumu, pamatojoties uz noteiktu parametru/nosacījumu:
< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< virsraksts >< / virsraksts >
< skripts src = 'https://cdn.tailwindcss.com' >< / skripts >
< / galvu >
< ķermeni >
< h1 id = 'temp' >Tas ir Linuxhint< / h1 >
< / ķermeni >
< / html >
< stils veids = 'text/css' >
#temp {
teksta noformējums: pasvītrojums;
teksts- izlīdzināt : centrs;
}
@ plašsaziņas līdzekļi ( max- platums :550 pikseļi ) {
#temp {
teksts-dekorācija-biezums: 4px;
} }
< / stils >
Šajā koda blokā apsveriet tālāk sniegtās metodes.
- Tāpat iekļaujiet CDN ceļu.
- Pēc tam pievienojiet “< h1 >” elements ar norādīto “id”.
- Koda CSS daļā laukā “< stils >” tagu, ieveidojiet iekļauto virsrakstu.
- Izveidojiet arī “@ plašsaziņas līdzekļi 'noteikums, kas piemēro nosacījumu, ka tik ilgi, kamēr ekrāna platums ir ' 550 pikseļi ”, teksta noformējuma biezums ir iestatīts uz “ 4 ” pikseļi.
- Tas ir tāds, ka pēc tam, kad ekrāna platums pārsniedz šo ierobežojumu, teksts tiks vienkārši pasvītrots.
Izvade
Šis rezultāts nozīmē, ka noteikums “@media”, t.i., multivides vaicājumi tiek lietoti atbilstoši ekrāna platumam.
Secinājums
Pārtraukuma punktus un multivides vaicājumus var lietot ar teksta dekorācijas biezumu, lai parādītu lietotās funkcijas atbilstoši lietotāja ekrāna izmēram, izmantojot dažādas klases, piemēram, ' md', 'lg ” vai izmantojot “@ plašsaziņas līdzekļi ” noteikums, attiecīgi. Pēdējā pieeja ir norādīta sadaļā “ CSS ” kods, kas izsauc mērķa elementu un rotā to, pamatojoties uz iestatīto parametru/nosacījumu. Šajā rokasgrāmatā ir aprakstīta teksta dekorēšanas biezuma izmantošana ar Tailwind Breakpoint un Media Queries.