Blog ini akan menunjukkan proses menggunakan pertanyaan media dan titik putus menggunakan utiliti tatal lampau dalam Tailwind.
Bagaimana untuk Memohon Pertanyaan Media dan Titik Putus dengan Tatal Terlebih dalam Tailwind?
Untuk menggunakan titik putus atau pertanyaan media namanya yang lain apabila ia berkaitan dengan CSS dengan ' tatal berlebihan ” utiliti. Program HTML dicipta dan menggunakan titik putus yang berbeza ' sm ',' md ” atau “ lg ” dengan kelas utiliti yang sesuai daripada utiliti “overscroll”. Ia mengubah tingkah laku tatal item pada saiz skrin yang berbeza.
Langkah 1: Gunakan Titik Putus dan Pertanyaan Media dalam kod HTML
Buat dokumen HTML dan gunakan titik putus yang merupakan saiz skrin dan pertanyaan media untuk setiap titik putus. Contohnya ' md ” dan “ lg ” titik putus digunakan dalam kod di bawah untuk saiz teks dan tingkah laku tatal berlebihan digunakan padanya:
< badan kelas = 'bg-slate-500' >
< div kelas = 'teks-merah-900 p-4 lg:p-8' >
< hlm kelas = 'relative md:md mutlak:overscroll-contain md:text-lg md:terjemah-x-4 md:terjemah-y-4 lg:overscroll-tiada lg:text-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 , sederhana - bersaiz 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-merah-900 ” menukar warna teks kepada merah.
- “ p-4 ” menambah padding 4px.
- “ lg: p-8 ” menambah padding 8px pada skrin besar.
- Kedudukan awal ' teg ” ditetapkan relatif kepada halaman induk dengan menggunakan “ relatif ” kelas.
- “ md:mutlak ” tukar kedudukan teks daripada relatif kepada mutlak pada skrin bersaiz sederhana.
- “ md:overscroll-contain ” memastikan bahawa kelakuan 'overscroll' terkandung dalam elemen itu dan bukannya menjejaskan keseluruhan halaman apabila skrin bersaiz sederhana.
- “ md:text-lg ” menjadikan teks besar pada skrin bersaiz sederhana.
- “ md:terjemah-x-4 ” dan “ md:terjemah-y-4 'gerakkan teks' 4px ” ke bawah dan ke kanan pada saiz skrin sederhana.
- “ lg:overscroll-tiada ” menetapkan “ tatal berlebihan ” harta kelas kepada tiada pada skrin bersaiz besar.
- “ lg:teks-xl ” menukar saiz teks kepada lebih besar untuk skrin bersaiz besar.
- “ lg:statik ” menukar kedudukan teks berkenaan dengan halaman induk daripada mutlak kepada statik untuk skrin bersaiz besar
- “ lg:terjemah-x-4 ” dan “ lg:terjemah-y-4 ” gerakkan teks 4px ke bawah dan ke kanan pada saiz skrin besar.
Langkah 2: Pratonton Output
Sekarang, pratonton halaman web yang dibuat dengan melaksanakan kod HTML di atas dan tukar saiz skrin tapak HTML untuk melihat perubahan yang boleh dilihat:
Dalam skrin di atas, ' tatal berlebihan ” tingkah laku kelihatan dan dengan mengecilkan saiz skrin, saiz teks boleh dilihat berubah oleh pertanyaan media yang digunakan padanya.
Kesimpulan
Untuk menggunakan pertanyaan media dan titik putus dengan “ tatal berlebihan ”, tentukan titik putus dengan beberapa kelas yang dikehendaki daripada utiliti “overscroll”. Dengan mengubah saiz skrin, pertanyaan media melaraskan output skrin. Blog ini telah menunjukkan proses menggunakan pertanyaan media dan titik putus dengan gelagat 'overscroll' dalam Tailwind.