前言
前天初步探究了一次响应式布局，虽然花了一天功夫，做出来的东西还是不行，在此我还是认为要做响应式布局设计应该先行，应该先制作3个以上的设计图出来，但是对于手机来说，图片流量也是个问题，但是这个我们暂时不管了，还是先拥抱移动互联网吧，继续我们的响应式布局！
固定宽度布局
在飞之前，我们还是应该先爬一爬，先来个固定宽度布局的页面吧，我今天还是先搞了一本书，看看系统的响应式布局是怎么回事的吧：
理论上，我们应该从移动开始设计慢慢到屏幕
但是现在我们无视这个理论吧
我们今天要做的一个页面搞简单点大致如此布局即可：
好了，具体做什么我还没想到呢，我们具体就做一个电影简介吧，于是开始布局：
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6 </style>
7 <script type="text/javascript">
8 </script>
9 </head>
10 <body>
11 <div id="wrapper">
12 <header id="header">
13 <nav id="navigation">
14 <ul>
15 <li><a href="#">首页</a></li>
16 <li><a href="#">简介</a></li>
17 <li><a href="#">排行榜</a></li>
18 <li><a href="#">新品速递</a></li>
19 <li><a href="#">热门</a></li>
20 <li><a href="#">联系</a></li>
21 </ul>
22 </nav>
23 </header>
24 <aside id="aside">
25 </aside>
26 <section id="main">
27 </section>
28 <footer id="footer">
29 版权所有：博客园·叶小钗
30 </footer>
31 </div>
32 </body>
33 </html>
复制代码
于是我们主体结构出来啦，现在开始修饰之：
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6 * { margin: 0; padding: 0;}
7 #wrapper { margin: 0 auto; width: 960px; }
8 #header { margin: 0 10px; width: 940px; background-color: #779307; }
9 #nav ul li { display: inline-block; }
10 #aside { margin: 0 10px; float: left; width: 220px; background-color: #fe9c00; }
11 #main { margin: 0 10px; float: right; width: 700px; background-color: #dedede; }
12 #footer { margin: 0 10px; clear: both; width: 940px; background-color: #663300; }
13 </style>
14 <script type="text/javascript">
15 </script>
16 </head>
17 <body>
18 <div id="wrapper">
19 <header id="header">
20 <nav id="nav">
21 <ul>
22 <li><a href="#">首页</a></li>
23 <li><a href="#">简介</a></li>
24 <li><a href="#">排行榜</a></li>
25 <li><a href="#">新品速递</a></li>
26 <li><a href="#">热门</a></li>
27 <li><a href="#">联系</a></li>
28 </ul>
29 </nav>
30 </header>
31 <aside id="aside">
32 aside
33 </aside>
34 <section id="main">
35 main
36 </section>
37 <footer id="footer">
38 版权所有：博客园·叶小钗
39 </footer>
40 </div>
41 </body>
42 </html>
复制代码
简单修饰后的结果：
好了，我们这里继续，将内容填充其来，并在网上偷一点点图，组装起来！
完整代码
页面没有任何设计丑是丑了点，但是还是可以看的，
预览地址：
http://sandbox.runjs.cn/show/cbwa1glu
我这里目的不是将网页做得多么好看，所以样式就不调整了，我们现在来看看响应式布局该怎么实现呢？？？
固定宽度的响应式布局
第一，我们内容区域在边栏后面，所以在代码上需要做一定调整：
重要的模块始终放到最前面
现在我们来做一个变化，当页面长度小于960的时候，我们给他加上点变化：
View Code
预览：
http://sandbox.runjs.cn/show/n2mmthoa
这里做了一点调整，当宽度确实太小的时候便使用select替代导航
这样我们第一步便结束了，现在开始第二步
百分比布局
我们很容易发现我们在屏幕变小时候有什么问题，第一个问题就是图片没有经过缩放或者变大，按照我原有的想法，图片其实该在小窗口中占满整个窗口的。
在很久之前我们使用百分比布局，但是一段时间后，我们认为各个网页表现应该一致，所以使用像素布局，但是今天我们却又开始了使用百分比，哎这是什么世道啊！！！他们说伟大的设计思想总会卷土从来，百分比又跳上了历史的舞台。。。
使用百分比时候有一公式：
目标元素宽度/上下文元素宽度=百分比宽度
百分比布局
预览地址：
http://sandbox.runjs.cn/show/f87bgad8
补充，手机截图
结语
今天再次研究了下响应式布局相关的东东，对他的东西稍微熟悉了点，下一次就必须拿出点能见人的东西了。
公司最近会有这方面的需求，到时候我把设计图和制作流程都研究下下，应该可以形成不错的东西的。
如果你觉得这篇文章还不错，请帮忙点击一下推荐，谢谢！
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/05/17/3083455.html，如需转载请自行联系原作者
