一、每行固定个数：保证排版的美观
二、随页面宽度调整个数和大小：保证图文的可读性
1、媒体查询控制宽度
方便、但存在兼容性
2、JS控制
600 && s_width <=1280)
{
$(".list-table1 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("width","50%");
}else if(s_width<=200){
$(".list-table1 li").css("width","100%");
}
}
$(window).resize（）实时获取浏览器的宽度
注意事项：
1、图片不变形
2、文字溢出处理
以上所述是小编给大家介绍的JS实现列表的响应式排版。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/46180.html