简单的响应式布局的实现
<!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>
无标题文档
![](http://images0.cnblogs.com/blog/580591/201311/25145842-8f71f31e969241febdc419944de5553e.jpg)
![](http://images0.cnblogs.com/blog/580591/201311/25145857-8405498ae0674dab9f8e7aaadff8829a.jpg)