Diseño receptivo de la lista de implementación de JS (recomendado)

Déjame mostrarte las representaciones primero. Si cree que es bastante bueno, consulte el código de implementación.

1. Número fijo por línea: asegúrese de la estética del diseño

 .list li {ancho: 20%; visual

2. Ajuste el número y el tamaño de acuerdo con el ancho de la página: asegúrese de la legibilidad de imágenes y textos

 .list li {ancho: 20%; visual

1. Ancho de control de consultas de medios

 @Media Screen y (Max-Width: 1280px) {. List-Table1 Li {Width: 25%}}@pantalla de medios y (max-width: 600px) {. list-table1 li {width: 33.3%}}}@pantalla de medios y (width max-width: 400px) {. list-table1 li {width: 50%}

Conveniente, pero compatible

2. Control JS

 $ (ventana) .resize (function () {resizeList ();}) función resizElist () {var s_width = $ (Window) .Width (); // Console.log ("S_Width:"+S_Width); if (S_Width> 600 && S_Width <= 1280) {$ (". li "). css (" ancho "," 25%");} else if (s_width> 400 && s_width <= 600) {$ (". List-table1 li "). css (" width "," 33.3%");} else si (s_width> 200 && s_width <= 400) {$ ((". li "). css (" ancho "," 50%");} else if (s_width <= 200) {$ (". List-table1 li "). CSS (" ancho "," 100%");}} $ (ventana) .resize () obtiene el ancho del navegador en tiempo de juego

Notas:

1. La imagen no se deforma

 .A-Common {ancho: auto; altura: auto;}. a-common img {ancho: 100%; altura: auto;}

2. Procesamiento de desbordamiento de texto

 .title, .subtitle {ancho: auto; text-align: centro; desbordamiento: oculto; espacio blanco: nowrap; text-superflow: ellipsis;}

Lo anterior es el diseño receptivo de la lista de implementación de JS introducida por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!