Artikel ini akan menerangkan cara menggunakan titik putus dan pertanyaan media bersama-sama dengan sifat kedudukan dalam Tailwind.
Bagaimana untuk Menggunakan Titik Putus dan Pertanyaan Media dengan Harta Kedudukan?
Titik putus ialah blok teras untuk mencipta reka bentuk responsif yang muktamad. Ia digunakan untuk membuat reka letak boleh disesuaikan dengan saiz skrin yang berbeza. Pertanyaan media digunakan untuk menggunakan gaya tertentu pada elemen bergantung pada resolusi skrin. Atribut kedudukan boleh digunakan bersama-sama dengan ini untuk menjadikan output lebih dioptimumkan.
Langkah 1: Menggunakan Harta Kedudukan dengan Titik Putus dan Pertanyaan Media
Dalam langkah ini, program disisipkan untuk menggunakan sifat kedudukan di sepanjang titik putus atau pertanyaan media ke atas “ yang dipilih hlm 'elemen:
< badan kelas = 'bg-slate-500' >
< div kelas = 'teks-kuning-300 p-4 lg:p-8' >
< hlm kelas = 'relative md:md mutlak:text-lg md:terjemah-x-4 md:terjemah-y-4 lg:teks-xl lg:statik lg:terjemah-x-4 lg:terjemah-y-4 ' > Teks ini akan mempunyai saiz fon yang berbeza berdasarkan saiz skrin. Ia akan menjadi lebih kecil pada skrin kecil, bersaiz sederhana pada skrin sederhana dan lebih besar pada skrin besar. < / hlm >
< / div >
< / badan >
Dalam kod ini:
- “ bg-slate-500 ” menetapkan warna latar belakang kepada kelabu.
- “ teks-kuning-300 ” menukar warna teks kepada kuning.
- “ p-4 ” menambah padding 4px.
- “ lg: p-8' menambah padding 8px pada skrin besar.
- Kedudukan awal ditetapkan relatif kepada halaman induk dengan menggunakan “ relatif ” kelas.
- “ md:text-lg ” menjadikan teks besar pada skrin bersaiz sederhana.
- “md:mutlak” mengubah suai kedudukan teks daripada relatif kepada mutlak pada skrin bersaiz sederhana.
- “ md:translate-x-4” dan “md:translate-y-4” gerakkan teks 4px ke bawah dan ke kanan pada saiz skrin sederhana.
- “ lg:teks-xl ” menukar saiz teks kepada lebih besar pada skrin bersaiz besar.
- “ lg:statik ” menukar kedudukan teks berkenaan dengan halaman induk daripada mutlak kepada statik pada skrin bersaiz besar
- “ lg:terjemah-x-4 ” dan “ lg:terjemah-y-4 ” gerakkan teks 4px ke bawah dan ke kanan pada saiz skrin yang besar.
Langkah 2: Sahkan Output
Pratonton halaman web yang dibuat oleh kod di atas dan laraskan saiz skrin untuk melihat perubahan sebagai:
Dapat dilihat bahawa teks menunjukkan tingkah laku responsif pada saiz skrin sederhana dan besar.
Kesimpulan
Untuk menggunakan titik putus dan pertanyaan media dalam Tailwind gunakan titik putus dan tetapkan pertanyaan media pada setiap titik putus, dan juga menukar sifat kedudukan pada titik putus skrin yang berbeza. Pecahan lalai ialah “ sm ',' md ',' lg ”, dan “ xl ”. Blog ini telah menunjukkan cara menggunakan titik putus dan pertanyaan media dengan sifat kedudukan dalam Tailwind.