css自适应浏览器大小

1、屏幕 > 900px :显示3列

2、450px < 屏幕 < 900px :显示2列

3、屏幕 < 450px :显示1列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>自适应demo</title>

</head>

<style>

.tul{

    width:100%;

    float:left;

    padding-left:10px;

    box-sizing:border-box;

}

.tli{

    border:1px solid #333;

    float:left;

    text-align:center;

    margin-right:8px;

    list-style:none;

}

.tli:last-child{

    margin-right:0;}

@media screen  and (min-width:900px){

    .tli{width:calc(33.33% - 10px); }

}

@media screen and (min-width:450px) and (max-width:900px){

    .tli{width:calc(50% - 10px); }

}

@media screen  and (max-width:450px){

    .tli{width:calc(100% - 2px); }

}

</style>

<body>

<ul class="tul">

<li class="tli">aaaaaaa</li>

<li class="tli">aaaaaaa</li>

<li class="tli">aaaaaaa</li>

</ul>

</body>

</html>

秒客网

css自适应浏览器大小

相关文章