Blog ini akan mendemonstrasikan proses penerapan kueri media dan breakpoint menggunakan utilitas overscroll di Tailwind.
Bagaimana Cara Menerapkan Kueri Media dan Breakpoint dengan Overscroll di Tailwind?
Untuk menerapkan breakpoint atau nama lainnya media queries ketika berhubungan dengan CSS dengan “ gulir berlebihan ' kegunaan. Program HTML dibuat dan menerapkan breakpoint yang berbeda “ sm ', ' md ' atau ' lg ” dengan kelas utilitas yang sesuai dari utilitas “overscroll”. Ini mengubah perilaku gulir item pada ukuran layar yang berbeda.
Langkah 1: Gunakan Breakpoints dan Media Query dalam kode HTML
Buat dokumen HTML dan terapkan breakpoint yang merupakan ukuran layar dan kueri media untuk setiap breakpoint. Contohnya ' md ' Dan ' lg ” breakpoint digunakan dalam kode di bawah ini untuk ukuran teks dan perilaku overscroll diterapkan padanya:
< tubuh kelas = 'bg-slate-500' >
< div kelas = 'teks-merah-900 hal-4 lg:p-8' >
< P kelas = 'md relatif: md mutlak: gulir-berisi md: teks-lg md: terjemahkan-x-4 md: terjemahkan-y-4 lg: gulir-tidak ada lg: teks-xl lg: statis lg: terjemahkan-x-4 lg :terjemahkan-y-4 ' > Teks ini akan memiliki ukuran font yang berbeda berdasarkan ukuran layar. Dia akan lebih kecil di layar kecil , sedang - berukuran pada layar sedang , dan lebih besar di layar besar. P >
div >
tubuh >
Dalam kode ini:
- “ bg-slate-500 ” mengatur warna latar belakang menjadi abu-abu.
- “ teks-merah-900 ” mengubah warna teks menjadi merah.
- “ hal-4 ” menambahkan padding 4px.
- “ lg: hal-8 ” menambahkan padding 8px pada layar besar.
- Posisi awal dari “ ” tag disetel relatif terhadap halaman induk dengan menggunakan “ relatif ' kelas.
- “ md: mutlak ” mengubah posisi teks dari relatif menjadi absolut pada layar berukuran sedang.
- “ md:overscroll-contain ” memastikan bahwa perilaku “gulir berlebihan” terkandung dalam elemen tersebut alih-alih memengaruhi seluruh halaman saat layar berukuran sedang.
- “ md:teks-lg ” membuat teks menjadi besar pada layar berukuran sedang.
- “ md: terjemahkan-x-4 ' Dan ' md: terjemahkan-y-4 ” pindahkan teksnya “ 4 piksel ” ke bawah dan ke kanan pada ukuran layar sedang.
- “ lg: gulir-tidak ada ” mengatur “ gulir berlebihan ” properti kelas menjadi tidak ada pada layar berukuran besar.
- “ lg:teks-xl ” mengubah ukuran teks menjadi ekstra besar untuk layar berukuran besar.
- “ lg: statis ” mengubah posisi teks terhadap halaman induk dari absolut menjadi statis untuk layar berukuran besar
- “ lg: terjemahkan-x-4 ' Dan ' lg: terjemahkan-y-4 ” pindahkan teks 4px ke bawah dan ke kanan pada ukuran layar besar.
Langkah 2: Pratinjau Outputnya
Sekarang, pratinjau halaman web yang dibuat dengan menjalankan kode HTML di atas dan ubah ukuran layar situs HTML untuk melihat perubahan yang terlihat:
Di layar di atas, “ gulir berlebihan ” perilaku terlihat dan dengan memperkecil ukuran layar dapat dilihat bahwa ukuran teks berubah berdasarkan kueri media yang diterapkan padanya.
Kesimpulan
Untuk menerapkan kueri media dan breakpoint dengan “ gulir berlebihan ” utilitas, tentukan breakpoint dengan beberapa kelas yang diinginkan dari utilitas “overscroll”. Dengan memvariasikan ukuran layar, kueri media menyesuaikan output layar. Blog ini telah mendemonstrasikan proses penerapan kueri media dan breakpoint dengan perilaku “overscroll” di Tailwind.