【探索HTML5第二弹05】响应式布局（中），一步一步响应式布局-白红宇

前言

前天初步探究了一次响应式布局，虽然花了一天功夫，做出来的东西还是不行，在此我还是认为要做响应式布局设计应该先行，应该先制作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">

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">

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，如需转载请自行联系原作者