列表的响应式排版-html教程-PHP中文网

列表的响应式排版

php中文网

发布： 2016-09-02 08:42:59

原创

1576人浏览过

效果展示:

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

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

登录后复制

方便、但存在兼容性

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

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>

登录后复制

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

登录后复制