【探索HTML5第二弹05】响应式布局(中),一步一步响应式布局

  1. 云栖社区>
  2. 博客>
  3. 正文

【探索HTML5第二弹05】响应式布局(中),一步一步响应式布局

范大脚脚 2017-11-30 21:48:00 浏览610
展开阅读全文
前言

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



网友评论

登录后评论
0/500
评论
范大脚脚
+ 关注