先给大家展示下效果图，如果感觉还不错，请参考实现代码。

一、每行固定个数：保证排版的美观。列表李{宽度：20%；显示：内嵌块；* display:inline* zoom:1飞越：隐藏；}二、随页面宽度调整个数和大小：保证图文的可读性。列表李{宽度：20%；显示：内嵌块；* display:inline* zoom:1飞越：隐藏；}1、媒体查询控制宽度

@媒体屏幕和（最大宽度：1280px){ .列表-表1 Li {宽度：25% } @媒体屏幕和(最大宽度：600像素){ .列表-表1 Li {宽度：33.3% } @媒体屏幕和(最大宽度：400像素){ .列表-表1里{宽度：50%}}方便、但存在兼容性

2、JS控制

$(窗口)。调整大小()函数(){ ResizeList()；})函数resizeList(){ var s _ width=$(window).宽度();//控制台。log(' s _ width : ' s _ width)；if(s_width600 s_width=1280){$(' .列表-表1李' .css('width '，' 25% ')；} else if(s _ width 400s _ width=600){ $(' .列表-表1李' .css('width '，' 33.3% ')；} else if(s _ width 200s _ width=400){ $(' .列表-表1李' .css('width '，' 50% ')；}else if(s_width=200){$(' .列表-表1李' .css('width '，' 100% ')；}} $(窗口)。调整大小()实时获取浏览器的宽度注意事项：

1、图片不变形。a-common { width : auto；height:auto}。表示“不”常见img { width :100%；height:auto}2、文字溢出处理。标题，字幕{横向：自动文本对齐：居中；飞越：隐藏；空白：无说唱；文本溢出：省略号；}以上所述是小编给大家介绍的射流研究…实现列表的响应式排版，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！