Permettez-moi de vous montrer les rendus en premier. Si vous pensez que c'est assez bon, veuillez vous référer au code d'implémentation.
1. Nombre fixe par ligne: assurez-vous l'esthétique de la disposition
.List li {largeur: 20%; affichage: bloc en ligne; * Affichage: en ligne; * Zoom: 1; débordement: caché;}2. Ajustez le nombre et la taille en fonction de la largeur de la page: assurez la lisibilité des images et des textes
.List li {largeur: 20%; affichage: bloc en ligne; * Affichage: en ligne; * Zoom: 1; débordement: caché;}1. Largeur de contrôle des requêtes multimédias
@Media Screen et (max-width: 1280px) {. list-table1 li {width: 25%}} @ media écran et (max-width: 600px) {. list-table1 li {width: 33.3%}} @ media écran et (max-width: 400px) {. List-Table1 li {width: 50%}}Pratique, mais compatible
2. Contrôle JS
$ (window) .resize (function () {resizelist ();}) function resizelist () {var s_width = $ (window) .width (); // console.log ("s_width:" + s_width); if (s_width> 600 && s_width <= 1280) {$ (".. li "). css (" largeur "," 25% ");} else if (s_width> 400 && s_width <= 600) {$ (". list-table1 li "). css (" width "," 33.3% ");} else if (s_width> 200 && s_width <= 400) {$ (".. li "). css (" largeur "," 50% ");} else if (s_width <= 200) {$ (". list-table1 li "). css (" width "," 100% ");}} $ (window) .resize () obtient la largeur du navigateur en temps réel en temps réelNotes:
1. L'image ne se déforme pas
.A-COMMON {Width: Auto; Height: Auto;}. A-COMMON IMG {Width: 100%; Height: Auto;}2. Traitement de débordement de texte
.Title, .Subtitle {width: Auto; Text-Align: Center; Overflow: Hidden; White-Space: Nowrap; Text-Overflow: EllipSis;}Ce qui précède est la disposition réactive de la liste d'implémentation JS introduite par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!