简单的响应式布局的实现 

<!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>无标题文档</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<style type="text/css">
.header{width:980px;
background-color:#C00;
margin:0 auto;}
.content{width:980px;
background-color:#F36;
margin:0 auto;}
.contentl{width:400px;
float:left;
}
.contentr{width:400px;
float:right;}
@media screen and (max-width:980px){
    .header{width:94%;
    height:auto;}
    .content{width:94%;
    height:auto;}
    .contentl{width:50%;}
    .contentr{width:50%;}
    }
    @media screen and (max-width:500px){
        .header{width:auto;
    height:auto;}
    .content{width:auto;
    height:auto;}
    .contentl{width:auto;
    float:none;}
    .contentr{width:auto;
    float:none;}
    @media screen and (max-width:480px){
        
        .img2{width:95%;
        height:auto;}
        .img1{width:95%;
        height:auto;}
        
        
        }
        
</style>

</head>


<body><div class="header"></div>
<div class="content">
<div class="contentl"><img class="img1" src="../images/00.jpg" /></div>
<div clas="contentr"><img class="img2" src="../images/02.jpg"/></div>
</div>

</body>
</html>

 

无标题文档

 
posted @ 2013-11-25 14:59  尚方  阅读(187)  评论(0)  编辑  收藏  举报