Tata Letak Responsif Daftar Implementasi JS (Direkomendasikan)

Izinkan saya menunjukkan rendering terlebih dahulu. Jika Anda merasa itu cukup bagus, silakan merujuk ke kode implementasi.

1. Nomor tetap per baris: Pastikan estetika tata letak

 .list li {width: 20%; display: inline-block;*display: inline;*zoom: 1; overflow: hidden;}

2. Sesuaikan jumlah dan ukuran sesuai dengan lebar halaman: Pastikan keterbacaan gambar dan teks

 .list li {width: 20%; display: inline-block;*display: inline;*zoom: 1; overflow: hidden;}

1. Lebar Kontrol Kueri Media

 @media layar dan (max-width: 1280px) {. List-table1 li {width: 25%}}@layar media dan (max-width: 600px) {. Daftar-tabel1 li {width: 33.3%}@layar media dan (max-width: 400px) {list-Table1

Nyaman, tetapi kompatibel

2. Kontrol JS

 $ (window) .resize (function () {resizeList ();}) function resizeList () {var s_width = $ (window) .width (); // console.log ("s_width:"+s_width); if (s_width> 600 && s_width <= 12 li").css("width","25%");}else if(s_width>400 && s_width <=600){$(".list-table1 li").css("width","33.3%");}else if(s_width>200 && s_width <=400){$(".list-table1 li "). css (" lebar "," 50%");} lain jika (s_width <= 200) {$ (". List-table1 li "). CSS (" Width "," 100%");}} $ (jendela) .Resize () mendapatkan lebar browser secara real time real time nyata real time nyata real time nyata real time nyata real time nyata real time real time nyata nyata nyata

Catatan:

1. Gambarannya tidak berubah bentuk

 .a-common {width: auto; height: auto;}. a-common img {width: 100%; tinggi: auto;}

2. Pemrosesan Teks Overflow

 .title, .subtitle {width: auto; text-align: center; overflow: hidden; space putih: nowrap; text-overflow: ellipsis;}

Di atas adalah tata letak responsif dari daftar implementasi JS yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!