Artikel ini akan menjelaskan cara menggunakan breakpoint dan kueri media bersama dengan properti posisi di Tailwind.
Bagaimana Cara Memanfaatkan Breakpoint dan Media Query dengan Properti Posisi?
Breakpoint adalah blok inti untuk menciptakan desain responsif terbaik. Ini digunakan untuk membuat tata letak dapat disesuaikan dengan ukuran layar yang berbeda. Kueri media digunakan untuk menerapkan gaya tertentu ke elemen bergantung pada resolusi layar. Atribut posisi dapat diterapkan bersamaan dengan ini untuk membuat keluaran lebih optimal.
Langkah 1: Menerapkan Properti Posisi dengan Breakpoints dan Media Query
Pada langkah ini, program dimasukkan untuk menerapkan properti posisi di sepanjang breakpoint atau media queries pada “ P ” elemen:
< tubuh kelas = 'bg-slate-500' >
< div kelas = 'teks-kuning-300 hal-4 lg:p-8' >
< P kelas = 'md relatif:md mutlak:teks-lg md:translate-x-4 md:translate-y-4 lg:teks-xl lg:statis lg:translate-x-4 lg:translate-y-4 ' > Teks ini akan memiliki ukuran font yang berbeda berdasarkan ukuran layar. Ukurannya akan lebih kecil di layar kecil, berukuran sedang di 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-kuning-300 ” mengubah warna teks menjadi kuning.
- “ hal-4 ” menambahkan padding 4px.
- “ lg: hal-8' menambahkan padding 8px pada layar besar.
- Posisi awal diatur relatif terhadap halaman induk dengan menggunakan tombol “ relatif ' kelas.
- “ md:teks-lg ” membuat teks menjadi besar pada layar berukuran sedang.
- “md: mutlak” mengubah posisi teks dari relatif menjadi absolut pada layar berukuran sedang.
- “ md: terjemahkan-x-4” Dan “md: terjemahkan-y-4” pindahkan teks 4px ke bawah dan ke kanan pada ukuran layar sedang.
- “ lg:teks-xl ” mengubah ukuran teks menjadi ekstra besar pada layar berukuran besar.
- “ lg: statis ” mengubah posisi teks terhadap halaman induk dari absolut menjadi statis pada 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: Verifikasi Outputnya
Pratinjau halaman web yang dibuat oleh kode di atas dan sesuaikan ukuran layar untuk melihat perubahannya sebagai:
Terlihat teks menunjukkan perilaku responsif pada ukuran layar sedang dan besar.
Kesimpulan
Untuk menggunakan breakpoint dan kueri media di Tailwind, terapkan breakpoint dan setel kueri media ke setiap breakpoint, dan juga ubah properti posisi di breakpoint berbeda di layar. Perincian defaultnya adalah “ sm ', ' md ', ' lg ', Dan ' xl ”. Blog ini telah menunjukkan cara menggunakan breakpoint dan kueri media dengan properti posisi di Tailwind.