Responsives Layout für Listen-HTML-Tutorial-php.cn

Responsives Layout für Listen

WBOY

Freigeben： 2016-09-02 08:42:59

Original

1424 Leute haben es durchsucht

Effektanzeige:

1. Feste Anzahl pro Zeile: Gewährleistung eines schönen Layouts

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

Nach dem Login kopieren

2. Passen Sie Anzahl und Größe entsprechend der Seitenbreite an: Stellen Sie die Lesbarkeit von Grafiken und Text sicher

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

Nach dem Login kopieren

1. Breite der Medienabfragesteuerung

<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>

Nach dem Login kopieren

Praktisch, aber kompatibel

2. JS-Steuerung

<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>

Nach dem Login kopieren

$(window).resize（）实时获取浏览器的宽度

Nach dem Login kopieren

Hinweis:

1. Das Bild ist nicht deformiert

<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>;}

Nach dem Login kopieren

2. Textüberlaufverarbeitung

<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>;
}

Nach dem Login kopieren