Saat merancang situs web responsif, Tailwind “ Titik henti sementara ' Dan ' Pertanyaan Media ” memainkan peran penting dalam menerapkan berbagai fungsi yang dapat disesuaikan dengan berbagai ukuran layar dengan nyaman. Fitur-fitur ini harus ditentukan melalui berbagai kelas yaitu, “ md (layar berukuran sedang)”, “lg(layar berukuran besar)” atau melalui “@media ” aturan yang menambahkan fungsionalitas berdasarkan kondisi yang ditentukan.
Artikel ini mencakup konten berikut:
- Bagaimana Cara Menerapkan Ketebalan Dekorasi Teks dengan Tailwind Breakpoints dan Media Query?
- Menerapkan Ketebalan Dekorasi Teks dengan Tailwind Breakpoints.
- Menerapkan Ketebalan Dekorasi Teks dengan Tailwind Media Queries.
Bagaimana Cara Menerapkan Ketebalan Dekorasi Teks dengan Tailwind Breakpoints dan Media Query?
“ Ketebalan dekorasi teks ” dapat diterapkan dengan bantuan “ ketebalan dekorasi teks ” properti diikuti dengan nilai ketebalan target dalam piksel. Piksel ini dapat berupa “ 1px”, “2px”, “4px” atau “8px ”. “ Titik henti sementara ” diterapkan untuk mengadaptasi berbagai fungsi yang diterapkan sesuai dengan ukuran layar pengguna menggunakan “ md (layar berukuran sedang)”, “lg(layar berukuran besar) ” kelas, dll. “ Pertanyaan Media ” aktifkan gaya implementasi bersyarat berdasarkan sekumpulan parameter browser dan OS melalui “@ media ' aturan.
Contoh 1: Menerapkan Ketebalan Dekorasi Teks dengan Tailwind Breakpoints
Contoh ini mengatur ketebalan dekorasi teks pada titik berbeda untuk menerapkan gaya yang bervariasi sesuai dengan ukuran layar:
< html >
< kepala >
< meta rangkaian karakter = 'utf-8' >
< meta nama = 'area pandang' isi = 'lebar=lebar perangkat, skala awal=1' >
< judul < / judul >
< naskah src = 'https://cdn.tailwindcss.com' < / naskah >
< / kepala >
< tubuh >
< area teks kelas = 'garis bawahi md:dekorasi-8 lg:kotak-dekorasi-irisan teks-teks hitam-2xl' pengenal = 'suhu' > Ini adalah petunjuk Linux < / area teks >
< / tubuh >
< / html >
Menurut cuplikan kode ini, terapkan langkah-langkah yang diberikan di bawah ini:
- Pertama, sertakan jalur CDN untuk menerapkan fungsi Tailwind.
- Kemudian, buatlah “< area teks >” elemen dan gabungkan tingkat ketebalan dekorasi teks yang dinyatakan pada layar default dan sedang melalui “ md ” kelas masing-masing.
- “ teks-hitam ' Dan ' teks-2xl ” kelas mengalokasikan warna (hitam) dan ukuran font, yaitu 2xl, masing-masing ke teks.
Keluaran
Dari hasil ini, dapat disimpulkan bahwa ketebalan dekorasi teks disesuaikan dengan berbagai ukuran layar secara tepat.
Contoh 2: Menerapkan Ketebalan Dekorasi Teks dengan Tailwind Media Query
“@ media ” Aturan digunakan dalam Kueri Media untuk menerapkan berbagai gaya untuk jenis/perangkat media berbeda. Demonstrasi khusus ini menggunakan kueri media berikut untuk menghias ketebalan teks berdasarkan parameter/kondisi tertentu:
< html >
< kepala >
< meta rangkaian karakter = 'utf-8' >
< meta nama = 'area pandang' isi = 'lebar=lebar perangkat, skala awal=1' >
< judul < / judul >
< naskah src = 'https://cdn.tailwindcss.com' < / naskah >
< / kepala >
< tubuh >
< h1 pengenal = 'suhu' >Ini adalah petunjuk Linux< / h1 >
< / tubuh >
< / html >
< gaya jenis = 'teks/css' >
#temp {
dekorasi teks: garis bawah;
teks- meluruskan : tengah;
}
@ media ( maksimal- lebar :550 piksel ) {
#temp {
ketebalan dekorasi teks: 4px;
} }
< / gaya >
Dalam blok kode ini, pertimbangkan metodologi yang disediakan di bawah ini:
- Demikian pula, sertakan jalur CDN.
- Kemudian, tambahkan “< h1 >” elemen yang memiliki “id” yang dinyatakan.
- Di bagian kode CSS, di dalam “< gaya >” tag, memberi gaya pada judul yang disertakan.
- Juga, buat “@ media ” aturan yang menerapkan ketentuan sepanjang lebar layarnya adalah “ 550 piksel ”, ketebalan dekorasi teks diatur ke“ 4 ” piksel.
- Sedemikian rupa sehingga setelah lebar layar melebihi batas ini, teks hanya akan digarisbawahi.
Keluaran
Hasil ini menandakan bahwa aturan “@media” yaitu Media Queries diterapkan sesuai dengan lebar layar.
Kesimpulan
Breakpoints dan Media Query dapat diterapkan dengan ketebalan dekorasi teks untuk menampilkan fungsionalitas yang diterapkan sesuai dengan ukuran layar pengguna menggunakan berbagai kelas seperti “ md', 'lg ” atau melalui “@ media ” aturannya masing-masing. Pendekatan terakhir ditentukan dalam “ CSS ” kode yang memanggil elemen target dan menghiasinya berdasarkan parameter/kondisi yang ditetapkan. Panduan ini menguraikan penerapan ketebalan dekorasi teks dengan Tailwind Breakpoint dan Media Query.