Bagaimana Menggunakan Titik Putus Responsif dalam Tailwind?

Tailwind CSS ialah rangka kerja yang memudahkan untuk membuat halaman web responsif. Titik putus responsif ialah lebar skrin di mana reka bentuk atau reka letak tapak web tertentu boleh berubah. Mereka memastikan tapak web berkelakuan dan kelihatan baik pada pelbagai saiz skrin dan peranti. Secara lalai, Tailwind menyediakan lima titik putus untuk saiz skrin yang berbeza, seperti “ sm ” (640px), “ md ” (768px), “ lg ” (1024px), “ xl ” (1280px) dan “ 2xl ” (1536px).

Tulisan ini akan menggambarkan kaedah untuk menggunakan titik putus responsif dalam CSS Tailwind.

Bagaimana Menggunakan Titik Putus Responsif dalam Tailwind?

Untuk menggunakan titik putus responsif dalam Tailwind, gunakan pengubah suai responsif, seperti “ sm ”, “ md ”, “ lg ”, “ xl ” dan “ 2xl ” dengan kelas lain dalam program HTML. Kemudian, lihat halaman web HTML dan tukar saiz skrin untuk memastikan titik putus berfungsi dengan betul.

Langkah 1: Gunakan Pengubahsuai Responsif dalam Program HTML
Buat program HTML dan gunakan pengubah suai responsif dengan gaya yang diingini. Sebagai contoh, kami telah menggunakan ' sm ”, “ md ”, “ lg ”, “ xl ” dan “ 2xl ” pengubah suai responsif:

< badan >

< div kelas = 'h-skrin bg-fuchsia-400 sm:bg-merah jambu-600 md:bg-hijau-700 lg:bg-ungu-500 xl:bg-teal-600 2xl:bg-kuning-500' >

< h1 kelas = 'teks-7xl teks-putih teks-pusat p-20' > Petunjuk Linux < / h1 >

< / div >

< / badan >

di sini:

“ bg-fuchsia-400 ” kelas menetapkan warna latar belakang kepada fuchsia.
“ sm:bg-merah jambu-600 ” kelas menggunakan warna merah jambu pada latar belakang untuk skrin kecil.
“ md:bg-hijau-700 ” kelas menukar warna latar belakang kepada hijau pada skrin sederhana.
“ lg:bg-ungu-50 ” kelas menetapkan warna latar belakang kepada ungu untuk skrin besar.
“ xl:bg-teal-600 ” kelas menggunakan warna teal pada latar belakang untuk skrin lebih besar.
“ 2xl:bg-kuning-500 ” kelas menukar warna latar belakang kepada kuning pada skrin 2xl.

Langkah 2: Sahkan Output
Lihat halaman web HTML untuk mengesahkan sama ada titik putus responsif berfungsi dengan betul atau tidak:

Dalam halaman web di atas, boleh diperhatikan bahawa warna halaman web berubah dengan saiz skrin mengikut mana titik putus ditentukan.

Kesimpulan

Untuk menggunakan titik putus responsif dalam Tailwind, gunakan pengubah suai responsif, seperti “ sm ”, “ md ”, “ lg ”, “ xl ” dan “ 2xl ” dengan kelas lain dalam program HTML. Pengubah suai ini digunakan untuk menggunakan gaya yang berbeza pada elemen tertentu berdasarkan saiz skrin. Tulisan ini telah menunjukkan kaedah untuk menggunakan titik putus responsif dalam CSS Tailwind.

Bagaimana Menggunakan Titik Putus Responsif dalam Tailwind?