Responsive layout for lists

WBOY
Release: 2016-09-02 08:42:59
Original
1421 people have browsed it

Effect display:

1. Fixed number per line: ensure beautiful layout

.list li{
	width:20%;display:inline-block;
	*display:inline;*zoom:1;overflow:hidden;
}
Copy after login

2. Adjust the number and size according to the page width: ensure the readability of images and texts

.list li{
width:20%;display:inline-block;
*display:inline;*zoom:1;overflow:hidden;
}
Copy after login

1. Media query control width

<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>
Copy after login

Convenient, but compatibility exists

2. JS control

<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>
Copy after login
$(window).resize()实时获取浏览器的宽度
Copy after login

Notes:

1. The picture will not be deformed

<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>;}
Copy after login

2. Text overflow processing

<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>;
}
Copy after login

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template