Artikel ini akan menyediakan prosedur untuk menggunakan ketinggian minimum dan ketinggian maksimum pada titik putus Tailwind dan pertanyaan media menggunakan garis besar berikut:
- Menetapkan Harta Ketinggian Min pada Titik Putus Ekor & Pertanyaan Media
- Menetapkan Harta Ketinggian Maks pada Titik Putus Ekor & Pertanyaan Media
Bagaimana untuk Menetapkan Harta Ketinggian Min pada Tailwind Breakpoint & Pertanyaan Media?
Tailwind menyediakan titik putus lalai dan pertanyaan media untuk menjadikan reka bentuk responsif untuk saiz skrin yang berbeza. Sifat yang diberikan kepada titik putus digunakan apabila saiz skrin yang ditentukan dipenuhi. Lebar minimum untuk titik putus lalai ini diterangkan seperti berikut:
- sm: Lebar minimum '640px'.
- md: Lebar minimum '768px'.
- lg: Lebar minimum '1024px'.
- xl: Lebar minimum '1280px'.
- 2xl: Lebar minimum '1536px'.
Sifat ketinggian min menetapkan had bawah untuk ketinggian unsur. Ini bermakna ia menentukan ketinggian minimum yang dibenarkan untuk dimiliki oleh sesuatu elemen. Untuk menggunakan sifat ketinggian min dengan titik putus dalam Tailwind, sintaks berikut digunakan:
< div kelas = '{breakpoint prefix}:min-h-{value}...' > < / div >
Mari gunakan sintaks yang ditakrifkan di atas dalam demonstrasi untuk mendapatkan pemahaman yang lebih baik. Dalam contoh ini, had ketinggian minimum untuk elemen akan meningkat pada ' md ” titik putus. Ini akan mengakibatkan peningkatan ketinggian keseluruhan elemen.
< div kelas = 'h-48 w-48 bulat-md bg-hijau-500 pusat teks md:min-h-skrin' >Tingkatkan Skrin Saiz untuk Meningkatkan ketinggian minimum< / div >
Penjelasan untuk kod di atas adalah seperti berikut:
- ' h-48 kelas ” menyediakan ketinggian 192px kepada elemen div.
- ' w-48 kelas ” menyediakan ketinggian 192px kepada elemen div.
- ' bulat-md ” kelas menyediakan sudut bulat kepada elemen div.
- ' bg-{warna}-{nombor} ” kelas menyediakan warna yang ditentukan kepada latar belakang elemen div.
- ' pusat teks ” kelas meletakkan elemen teks ke tengah elemen div.
- ' md:min-h-skrin ” kelas akan meningkatkan had ketinggian minimum bersamaan dengan ketinggian skrin 100%.
Pengeluaran:
Ia boleh dilihat dalam output, bahawa apabila ' md ” saiz skrin dipenuhi, elemen akan mendapat 100% ketinggian skrin. Ini berlaku kerana had ketinggian minimum untuk “ md ” titik putus ditetapkan sama dengan ketinggian skrin:
Bagaimana untuk Menetapkan Harta Ketinggian Maks pada Titik Putus Ekor & Pertanyaan Media?
Kelas ketinggian maksimum menetapkan had atas untuk sifat ketinggian dalam Tailwind. Ini bermakna ia menentukan ketinggian maksimum yang boleh dimiliki oleh elemen. Sintaks untuk menggunakan kelas ketinggian minimum dengan titik putus adalah seperti berikut:
< div kelas = '{breakpoint prefix}:max-h-{size}...' > < / div >Mari gunakan sintaks yang ditakrifkan di atas dalam demonstrasi untuk mendapatkan pemahaman yang lebih baik. Dalam contoh ini, elemen akan disediakan dengan had ketinggian maksimum tertentu untuk ' md ” titik putus. Ini akan mengecilkan ketinggian lalai yang diberikan kepada elemen.
< div kelas = 'h-96 w-48 bulat-md bg-hijau-500 pusat teks md:max-h-60' >Tingkatkan Skrin Saiz untuk Meningkatkan ketinggian minimum< / div >Ambil perhatian bahawa dalam kod di atas, ketinggian lalai elemen disediakan dengan 'h-96' iaitu 384px. Walau bagaimanapun, ketinggian ini mengecil kepada '240px' apabila titik putus 'md' dipenuhi. Ini disebabkan ' md:maks-h-60 ” kelas.
Pengeluaran:
Dalam output di bawah, dapat dilihat dengan jelas bahawa sebaik sahaja saiz skrin mencapai ' md ” titik putus, ketinggian elemen elemen menjadi lebih kecil.
Itu semua tentang menetapkan sifat ketinggian minimum dan maksimum dengan titik putus Tailwind.
Kesimpulan
Untuk menetapkan sifat ketinggian maksimum dengan titik putus Tailwind dan pertanyaan media, “ {awalan titik putus}:max-h-{saiz} ” kelas digunakan. Begitu juga, untuk menetapkan sifat ketinggian minimum dengan titik putus Tailwind, “ {breakpoint prefix}:min-h-{size} ” kelas digunakan. Artikel ini telah menyediakan prosedur untuk menggunakan sifat ketinggian min dan maksimum pada titik putus dan pertanyaan media dalam Tailwind.