前言
前天初步探究了一次响应式布局,虽然花了一天功夫,做出来的东西还是不行,在此我还是认为要做响应式布局设计应该先行,应该先制作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,如需转载请自行联系原作者