Response layout of the list, response layout of the List
Effect display:
I. fixed number of lines: ensure the appearance of the layout
.list li{width:20%;display:inline-block;*display:inline;*zoom:1;overflow:hidden;}
Ii. Adjust the number and size with the page width: Ensure the readability of the text
.list li{width:20%;display:inline-block;*display:inline;*zoom:1;overflow:hidden;}
1. Media query control width
@media screen and (max-width:1280px){ .list-table1 li{width:25%}}@media screen and (max-width:600px){ .list-table1 li{width:33.3%}}@media screen and (max-width:400px){ .list-table1 li{width:50%}}
Convenient but compatible
2. JS Control
$(window).resize(function () { resizeList();})function resizeList(){ var s_width=$(window).width(); //console.log("s_width:"+s_width); if(s_width>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 () obtains the browser width in real time.
Note:
1. No image deformation
.a-common{width:auto;height:auto;}.a-common img{width:100%;height:auto;}
2. Text overflow Processing
.title, .subtitle{width:auto;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}