思路：以980px为分界线，大于等于980px的我们写一套样式，小于980px的我们再作修改。
先上效果图：
里面的样式的颜色搭配和文字内容是参考博客园里面的一个仁兄写的，具体是谁忘记了。但是里面的代码我没有采用html5，原因是我想在IE6/7/8/9都能正常显示。
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>响应式web设计练习</title> <style> body{ background:#000; font:‘微软雅黑‘ normal 14px/2; color:#464646; padding-top:20px;} *{ padding:0px; margin:0px; list-style:none; font-style:normal; text-decoration:none;} .header{width:980px; margin:0 auto;} .header .header_01{ font-size:36px; line-height:48px; font-weight:700; font:Arial, Helvetica, sans-serif; color:#F90; height:48px;} .header ul{ height:50px; background:#663; text-align:center; border-radius:5px;} .header ul li{ width:200px; display:inline-block;*display:inline;*zoom:1; line-height:50px;} .header ul li a{ color:#fff;} .content{width:980px; margin:10px auto; height:auto; overflow:hidden;zoom:1;} .content_01{ width:700px; height:500px; float:left; display:inline; border-radius:5px; background:#fff;} .content_01 h1{ height:48px;} .content_02{ width:250px; height:500px; float:right;} .content_02_01{ width:250px; height:240px;border-radius:5px;background:#fff; margin-bottom:20px;} .content_02_01 ul{ width:230px; height:240px; margin-left:10px;} .content_02_01 ul li{ width:230px; height:30px; line-height:30px; overflow:hidden;} .content_02_01 ul li a{ width:230px; height:30px; line-height:30px; overflow:hidden; display:inline-block; font-size:12px; color:black; font-family:‘微软雅黑‘} .content_02_02{ width:250px; height:240px;border-radius:5px;background:#fff; } .content_01_01{ width:980px; height:100px;} .content_01_01 img{ max-width:100px; height:auto; margin:0 auto; border:0px;} .content_01_02{ margin:20px; font-size:12px;} .content_01_02 p{ margin-top:1em; text-indent:2em;} .footer{ width:980px; background:#669; margin:12px auto; color:#fff; height:36px; text-align:center; font-size:12px; line-height:36px; border-radius:5px;} .footer em{ margin-right:5px;} @media screen and (max-width:980px){ .header{ width:100%; overflow:hidden; *zoom:1;} .header .header_01{ font-weight::700; font-size:36px; line-height:48px; font-family:Arial, Helvetica, sans-serif; color:#F90; text-align:center; height:auto;} .header ul{ background:none; text-align:center; height:auto; width:100%;} .header ul li{ display:block; background:#663; border-radius:5px; margin:3px 0; height:30px; line-height:30px; width:100%;} .content{width:100%; height:auto; margin:10px auto;} .content_01{ width:100%;display:block; height:auto; border-radius:5px; background:#fff; float:none; padding-bottom:30px;} .content_02{ width:100%; height:500px;display:block; margin-top:20px;} .content_02_01{ width:100%; height:240px;border-radius:5px;background:#fff; margin-bottom:20px;} .content_02_02{ width:100%; height:240px;border-radius:5px;background:#fff; } .content_01_01{width:100%; text-align:center;} .content_02_01 ul{width:100%; height:240px; margin-left:10px;} .content_02_01 ul li{width:100%; height:30px;} .content_02_01 ul li a{width:100%; height:30px;} .footer{width:100%; height:auto; background:#669; color:#fff; text-align:center; font-size:12px; border-radius:5px;} .footer em{width:95%; margin::0 auto; display:block; border-bottom:1px dotted #789;} } </style> </head> <body> <!--header--> <div class="header"> <div class="header_01">响应式web设计练习</div> <ul> <li><a href="#">主页home</a></li> <li><a href="#">公司Company</a></li> <li><a href="#">前端front end</a></li> </ul> </div> <div class="content"> <div class="content_01"> <h1>学习响应式设计</h1> <div class="content_01_01"> <img src="" alt="图像" /> </div> <div class="content_01_02"> <p>十一长假已然过去了一大半。今天倒真是晴朗的不行，向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生，对每年的几次长假就无比珍惜，想方设法让每一天都尽量过的饱满一些；夜里闭上眼，满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园。..也许需要出门走一走了。</p> <p>OK开始说正经的了。在之前一篇译文中，我们了解了<a href="http://www.chinaz.com/manage/2011/1121/221607.shtml" target="_blank">响应式Web设计的概念、组成要素以及基本的实现思路</a>。今天继续相关话题，我们将从前文介绍过的"弹性布局结构"这方面出发，通过一个具体的实例来深入学习。</p> <p>如今的屏幕分辨率，小至320px（iPhone），大到2560px甚至更高（大显示器），变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来，我们将了解一下怎样通过HTML5和CSS3 Media Queries（媒介查询）相关技术来实现跨设备跨浏览器的响应式Web设计方案。</p> <p>我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的宽度设置由"固定"方式改为"液态"，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置于主内容部分的下方，整个页面变为单栏布局。</p> </div> </div> <div class="content_02"> <div class="content_02_01"> <ul> <li><a href="#">·精干高效，转型创新，但我们的传统底精干高效，转型创新，但我们的传统底蕴不能精干高效，转型创新，但我们的传统底蕴不能</a></li> <li><a href="#">·精干高效，转型创新，但我们的传统底蕴不能丢</a></li> <li><a href="#">·精干高效，转型创新，但我们的传统底蕴不能丢</a></li> <li><a href="#">·精干高效，转型创新，但我们的传统底蕴不能丢</a></li> <li><a href="#">·精干高效，转型创新，但我们的传统底蕴不能丢</a></li> <li><a href="#">·精干高效，转型创新，但我们的传统底蕴不能丢</a></li> <li><a href="#">·精干高效，转型创新，但我们的传统底蕴不能丢</a></li> <li><a href="#">·精干高效，转型创新，但我们的传统底蕴不能丢</a></li> </ul> </div> <div class="content_02_02"></div> </div> </div> <div class="footer"> <em>联系我们</em> <em>网站地图</em> <em>广告服务</em> <em>友情链接</em> </div> </body> </html>
原文：http://www.cnblogs.com/lihaozhou/p/3568664.html