Deixe -me mostrar as renderizações primeiro. Se você acha que é muito bom, consulte o código de implementação.
1. Número fixo por linha: verifique se a estética do layout
.List Li {Width: 20%; Display: Inline-Block;*Display: Inline;*Zoom: 1; Overflow: Hidden;}2. Ajuste o número e o tamanho de acordo com a largura da página: verifique a legibilidade de imagens e textos
.List Li {Width: 20%; Display: Inline-Block;*Display: Inline;*Zoom: 1; Overflow: Hidden;}1. Largura de controle de consulta de mídia
@media Screen e (max-width: 1280px) {. List-Table1 li {width: 25%}}@tela de mídia e (max-width: 600px) {.Conveniente, mas compatível
2. Controle JS
$ (janela) .Resize (function () {resizEList ();}) função resizElist () {var s_width = $ (window) .width (); // console.log ("s_width:"+s_width); if (s_width> 600 && swidth <= 1280) li "). CSS (" largura "," 25%");} else if (s_width> 400 && s_width <= 600) {$ (". list-table1 li "). css (" largura "," 33.3%");} else (s_width> 200 &&s _widththth <33.3%");} se (s_width> 200 & & s_wid " li "). css (" largura "," 50%");} else if (s_width <= 200) {$ ("..Notas:
1. A imagem não se deforma
.a-common {width: Auto; altura: auto;}.2. Processamento de transbordamento de texto
.TITLE, .Subtitle {Largura: Auto; Text-Align: Center; Overflow: Hidden; White-Space: Nowrap; Text-overflow: elipsis;}O exposto acima é o layout responsivo da lista de implementação do JS introduzida pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!