效果展示:
一、每行固定个数:保证排版的美观
.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }
二、随页面宽度调整个数和大小:保证图文的可读性
.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }
1、媒体查询控制宽度
<span style="color: #800000;">@media screen and (max-width:1280px)</span>{<span style="color: #ff0000;"> .list-table1 li{width</span>:<span style="color: #0000ff;">25%</span>}<span style="color: #800000;"> } @media screen and (max-width:600px)</span>{<span style="color: #ff0000;"> .list-table1 li{width</span>:<span style="color: #0000ff;">33.3%</span>}<span style="color: #800000;"> } @media screen and (max-width:400px)</span>{<span style="color: #ff0000;"> .list-table1 li{width</span>:<span style="color: #0000ff;">50%</span>}<span style="color: #800000;"> }</span>
方便、但存在兼容性
2、JS控制
<span style="color: #800000;">$(window).resize(function () </span>{<span style="color: #ff0000;"> resizeList(); </span>}<span style="color: #800000;">) function resizeList()</span>{<span style="color: #ff0000;"> var s_width=$(window).width(); //console.log("s_width</span>:<span style="color: #0000ff;">"+s_width)</span>;<span style="color: #ff0000;"> if(s_width>600 && s_width <=1280) { $(".list-table1 li").css("width","25%"); </span>}<span style="color: #800000;">else if(s_width>400 && s_width <=600)</span>{<span style="color: #ff0000;"> $(".list-table1 li").css("width","33.3%"); </span>}<span style="color: #800000;">else if(s_width>200 && s_width <=400)</span>{<span style="color: #ff0000;"> $(".list-table1 li").css("width","50%"); </span>}<span style="color: #800000;">else if(s_width<=200)</span>{<span style="color: #ff0000;"> $(".list-table1 li").css("width","100%"); </span>}<span style="color: #800000;"> }</span>
$(window).resize()实时获取浏览器的宽度
注意事项:
1、图片不变形
<span style="color: #800000;">.a-common</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">auto</span>;}<span style="color: #800000;"> .a-common img</span>{<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">auto</span>;}
2、文字溢出处理
<span style="color: #800000;">.title, .subtitle</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #ff0000;"> text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>; }