Maison > interface Web > tutoriel HTML > le corps du texte

列表的响应式排版

WBOY
Libérer: 2016-09-02 08:42:59
original
1411 Les gens l'ont consulté

效果展示:

     

 

一、每行固定个数:保证排版的美观

.list li{
	width:20%;display:inline-block;
	*display:inline;*zoom:1;overflow:hidden;
}
Copier après la connexion

二、随页面宽度调整个数和大小:保证图文的可读性

.list li{
width:20%;display:inline-block;
*display:inline;*zoom:1;overflow:hidden;
}
Copier après la connexion

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>
Copier après la connexion

方便、但存在兼容性

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>
Copier après la connexion
$(window).resize()实时获取浏览器的宽度
Copier après la connexion

注意事项:

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>;}
Copier après la connexion

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>;
}
Copier après la connexion

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!