Di Tailwind CSS, “ kotak-dekorasi-istirahat ” properti menentukan rendering latar belakang, batas, dan padding elemen ketika mencakup beberapa baris atau kolom. Ini memiliki dua kelas yaitu, ' mengiris ' Dan ' klon ”. Pengguna dapat menggunakan properti 'box-decoration-break' dengan breakpoint dan kueri media untuk menentukan bagaimana tata letak dan tampilan elemen berubah bergantung pada lebar perangkat dan menerapkan gaya yang berbeda berdasarkan breakpoint.
Artikel ini akan mendemonstrasikan metode penggunaan break dekorasi kotak dengan breakpoint dan kueri media.
Bagaimana Cara Menggunakan Break Dekorasi Kotak Dengan Breakpoint dan Media Queries di Tailwind?
Untuk menggunakan jeda dekorasi kotak dengan breakpoint dan kueri media, diperlukan untuk menentukan nilai dan gaya yang berbeda untuk ukuran layar yang berbeda dalam program HTML. Kemudian, lihat halaman web dengan menjalankan program HTML untuk verifikasi.
Untuk pemahaman yang lebih baik, lihat langkah-langkah yang disebutkan di bawah ini:
Langkah 1: Gunakan Breakpoints dan Media Queries Dengan Box Decoration Break
Buat program HTML dan tentukan nilai dan gaya yang berbeda untuk ukuran layar yang berbeda. Misalnya, kami telah mendefinisikan ' md ' Dan ' lg ” breakpoints dengan gaya mereka:
< tubuh >< menjangkau kelas = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice teks-putih teks-3xl px-2' >
Halo < br />
Linux < br />
Petunjuk
menjangkau >
tubuh >
Di Sini:
- “ bg-teal-600 ” menyetel warna hijau ke latar belakang.
- “ kotak-dekorasi-klon ” adalah kelas khusus yang digunakan untuk dekorasi kotak kloning.
- “ md:bg-kuning-500 ” menerapkan warna latar belakang kuning ke elemen untuk “ md ” breakpoint (layar berukuran sedang).
- “ lg:kotak-dekorasi-irisan ” mengatur efek pemotongan pada dekorasi kotak untuk “ lg ” breakpoint (layar besar).
- “ teks-putih ” menyetel warna putih ke teks.
- “ teks-3xl ” mengatur ukuran font menjadi 3xl.
- “ px-2 ” menambahkan padding horizontal 2 piksel ke elemen .
Langkah 2: Verifikasi Keluaran
Untuk memastikan bahwa breakpoint dan kueri media telah berhasil diterapkan, jalankan program HTML, dan lihat halaman web:
Dapat dilihat bahwa halaman web berubah sesuai dengan penentuan breakpoint dan kueri media.
Kesimpulan
Untuk menggunakan jeda dekorasi kotak dengan breakpoint dan kueri media di Tailwind, buat file HTML terlebih dahulu. Kemudian, gunakan breakpoint dan kueri media dalam program HTML dengan menentukan nilai dan gaya yang berbeda untuk ukuran layar yang berbeda. Untuk verifikasi, jalankan program HTML dan lihat halaman web. Artikel ini telah mendemonstrasikan metode penggunaan break dekorasi kotak dengan breakpoint dan kueri media.