清單的響應式排版

效果展示:

     

 

一、每行固定個數：保證排版的美觀

.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 e4a1602c9d53b37293783e897be8ef9e400 && s_width ecfd27dd18a84020774b1cc084be91be200 && 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>;
}