css自适应浏览器大小

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>

 

posted @ 2018-07-30 20:18  N神3  阅读(3044)  评论(0)  编辑  收藏  举报