Semasa mereka bentuk laman web responsif, Tailwind “ Titik putus ” dan “ Pertanyaan Media ” memainkan peranan penting dalam menggunakan pelbagai fungsi yang boleh disesuaikan dengan saiz skrin yang berbeza dengan mudah. Ciri-ciri ini akan ditentukan melalui pelbagai kelas iaitu, “ md (skrin bersaiz sederhana)”, “lg(skrin bersaiz besar)” atau melalui “@media ” peraturan yang menambahkan fungsi berdasarkan syarat yang ditentukan.
Artikel ini merangkumi kandungan berikut:
- Bagaimana untuk Memohon Ketebalan Hiasan Teks dengan Titik Putus Ekor dan Pertanyaan Media?
- Menggunakan Ketebalan Hiasan Teks dengan Titik Putus Angin Ekor.
- Menggunakan Ketebalan Hiasan Teks dengan Pertanyaan Media Tailwind.
Bagaimana untuk Memohon Ketebalan Hiasan Teks dengan Titik Putus Ekor dan Pertanyaan Media?
' Hiasan teks Ketebalan ” boleh digunakan dengan bantuan “ teks-hiasan-ketebalan ” sifat diikuti dengan nilai ketebalan sasaran dalam piksel. Piksel ini boleh menjadi ' 1px”, “2px”, “4px” atau “8px ”. ' Titik putus ' digunakan untuk menyesuaikan pelbagai fungsi yang digunakan mengikut saiz skrin pengguna menggunakan ' md (skrin bersaiz sederhana)', 'lg(skrin bersaiz besar) ” kelas, dsb. Pertanyaan Media ” dayakan gaya pelaksanaan bersyarat berdasarkan set pelayar dan parameter OS melalui “@ media ” peraturan.
Contoh 1: Menggunakan Ketebalan Hiasan Teks dengan Titik Putus Angin Ekor
Contoh ini menetapkan ketebalan hiasan teks pada titik yang berbeza untuk menggunakan gaya yang berbeza mengikut saiz skrin:
< html >
< kepala >
< meta charset = 'utf-8' >
< meta nama = 'port view' kandungan = 'lebar=lebar peranti, skala awal=1' >
< tajuk >< / tajuk >
< skrip src = 'https://cdn.tailwindcss.com' >< / skrip >
< / kepala >
< badan >
< textarea kelas = 'gariskan md:decoration-8 lg:box-decoration-slice text-black text-2xl' ID = 'temp' > Ini adalah Linuxhint < / textarea >
< / badan >
< / html >
Mengikut coretan kod ini, gunakan langkah yang diberikan di bawah:
- Pertama, sertakan laluan CDN untuk menggunakan fungsi Tailwind.
- Kemudian, buat '< textarea >” dan masukkan tahap ketebalan hiasan teks yang dinyatakan pada skrin lalai dan sederhana melalui “ md ” kelas masing-masing.
- ' teks-hitam ” dan “ teks-2xl ” kelas memperuntukkan warna (hitam) dan saiz fon iaitu, 2xl kepada teks, masing-masing.
Pengeluaran
Daripada hasil ini, boleh tersirat bahawa ketebalan hiasan teks disesuaikan dengan saiz skrin yang berbeza-beza dengan sewajarnya.
Contoh 2: Menggunakan Ketebalan Hiasan Teks dengan Pertanyaan Media Tailwind
'@ media Peraturan ” digunakan dalam Pertanyaan Media untuk melaksanakan pelbagai gaya untuk jenis/peranti media yang berbeza. Demonstrasi khusus ini menggunakan pertanyaan media ini untuk menghiasi ketebalan teks berdasarkan parameter/keadaan tertentu:
< html >
< kepala >
< meta charset = 'utf-8' >
< meta nama = 'port view' kandungan = 'lebar=lebar peranti, skala awal=1' >
< tajuk >< / tajuk >
< skrip src = 'https://cdn.tailwindcss.com' >< / skrip >
< / kepala >
< badan >
< h1 ID = 'temp' >Ini adalah Linuxhint< / h1 >
< / badan >
< / html >
< gaya taip = 'teks/css' >
#temp {
text-decoration: garis bawah;
teks- selaraskan : pusat;
}
@ media ( maksimum- lebar :550px ) {
#temp {
ketebalan-hiasan teks: 4px;
} }
< / gaya >
Dalam blok kod ini, pertimbangkan metodologi yang disediakan di bawah:
- Begitu juga, sertakan laluan CDN.
- Kemudian, tambahkan “< h1 >' elemen yang mempunyai 'id' yang dinyatakan.
- Dalam bahagian CSS kod, dalam '< gaya >”, gayakan tajuk yang disertakan.
- Juga, buat “@ media ' peraturan yang menggunakan syarat sedemikian selagi lebar skrin ialah ' 550px ”, ketebalan hiasan-teks ditetapkan kepada “ 4 ” piksel.
- Oleh itu, selepas lebar skrin melebihi had ini, teks hanya akan digariskan.
Pengeluaran
Hasil ini menandakan bahawa peraturan '@media' iaitu, Pertanyaan Media digunakan mengikut lebar skrin.
Kesimpulan
Titik Putus dan Pertanyaan Media boleh digunakan dengan ketebalan hiasan teks untuk memaparkan fungsi yang digunakan mengikut saiz skrin pengguna menggunakan pelbagai kelas seperti ' md', 'lg ” atau melalui “@ media ” peraturan masing-masing. Pendekatan terakhir dinyatakan dalam ' CSS ” kod yang memanggil elemen sasaran dan menghiasinya berdasarkan parameter/syarat yang ditetapkan. Panduan ini menghuraikan penggunaan ketebalan hiasan teks dengan Tailwind Breakpoint dan Pertanyaan Media.