`
king_tt
  • 浏览: 2083199 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

【探索HTML5第二弹04】响应式布局(上),让我们一起来响应式布局吧

 
阅读更多

前言

第一次看到响应式布局这个东西的时候,我还以为又出了新东西呢,稍微研究了下才发现其实也是现有资源的组合而出的创新,中国什么时候也搞一个这种创新呢?

所谓响应式布局,大意是在不同设备上(不同尺寸下)都能以比较合理的方式显示,大家千万不要觉得iphone上的显示感觉还不差,我们就说说博客园吧,其实园子该改成响应式布局,只不过要花点功夫。

我们首先进入博客园后,手机对整个页面是有一定缩放的,所以看上去还是全屏呢,然后你要看其中一个内容还要滑大,左边完了要看右边又要滑过去,哎真是费力不讨好啊,不注意点到一个a标签又不见了,所以这真不是比较友好的界面。

响应式布局的提出是比较有意思的,根据不同的尺寸做不同的显示,甚至在小尺寸的情况下一些东西不让他显示,所以在各种屏幕上表现的都比较不错。

在前端界有个非常出名的网站叫做禅意花园,我个人感觉响应式布局的出现与之有异曲同工之妙,都是同样的html结构,但是在不同情况下显示便不一样了

Media Query(媒介查询)

在这两天的学习中,我感觉他就是响应式布局的主角了,能根据不同的尺寸加载不同的css样式,我们要做的就是在相同的html结构下,用css控制合适的显示即可。

复制代码
 1 <style type="text/css">
 2     #container { width: 960px; margin: auto; }
 3     #wrap { width: 740px; float: left; }
 4     p { line-height: 600px; text-align: center; font-weight: bold; margin: 0 0 20px 0; }
 5     #main { width: 520px; float: right; background: yellow; }
 6     #sub01 { width: 200px; float: left; background: orange; }
 7     #sub02 { width: 200px; float: right; background: green; }
 8     /*--窗口1000px以上--*/
 9     @media screen and (min-width: 1000px) 
10     {
11         #container { width: 1000px; }
12         #wrapper { width: 780px; float: left; }
13         #main { width: 560px; float: right; }
14         #sub01 { width: 200px; float: left; background: orange; }
15         #sub02 { width: 200px; float: right; background: green; }
16     }
17      /*--窗口640px以上、999px以下--*/
18     @media screen and (min-width: 1000px) and (max-width: 999px)
19     {
20         #container { width: 640px; }
21         #wrapper { width: 640px; float: none; }
22         #main { width: 420px; float: right; }
23         #sub01 { width: 200px; float: left; background: orange; }
24         #sub02 { width: 100%; float: right; background: green; }
25     }
26      /*--窗口639px以下*/
27     @media screen and (min-width: 1000px) and (max-width: 999px)
28     {
29         #container { width: 100%; }
30         #wrapper { width: 100%; float: none; }
31         #main { width: 100%; float: right; }
32         #sub01 { width: 100%; float: left; background: orange; }
33         #sub02 { width: 100%; float: right; background: green; }
34     }
35     </style>
复制代码

这便是基本语法,好了接下来我们来干点有意思的事情,一步一步响应式布局,第一步,我们去网上找点有意思的图片吧。

第一步,准备资源

本来是在网上找了很多资源psd资源的,本来想的是便切图便做来着,但是网上的资源基本都是外国的,而且切图搞起来也很慢,于是折腾了3个小时了,最后还是将原来的东西搞了出来。。。。以下是我原来做过的布局,现在拿出来看看,还是第一个作品呢:

【初探HTML5之使用新标签布局】用html5布局我的博客页!

这个页面明显不是响应式布局,那么我们今天就来修改修改吧。。。

原来的代码

我们注意观察下原来的页面,因为是以margin的方式布局,所以基本看不出来变化呢,虽以这个页面作为响应式布局的练手不太合适,但我们还是做起来看看吧。

各位注意到这里有个很巧妙的地方了吗?

html布局时候我是采用先主体内容,然后是左边的内容,再然后是评论相关,现在我们调整下顺序看看会怎么样:

展示上没有任何变化,因为aside是绝对定位的,现在我们加上点“响应式布局”的东西。。。。

开始响应式布局

复制代码
1         /*在窗口尺寸在400-799时候我们做一点变化*/
2         @media screen and (min-width: 1px) and (max-width: 699px){
3             .header hgroup { margin-left: 0;}
4             .nav { margin-left: 0;}
5             .main { margin-left: 0;}
6             .comment { margin-left: 0;}
7             .aside { width: 100%; position: static; }
8         }
复制代码
完整代码

大家知道添加以上代码后出现了什么样的事情么???

我神奇的在这里拖动浏览器得到了自己想要的这一幕,诚然,这算不得什么,但是至少我可以自豪的说我今天响应式布局了。。。。当然我们若是再加一点动画的元素的话。。。

        * { transition: all 1s;}

这句话将带来动画效果,若是用得好的话是很不错的哟!!!

预览地址

http://sandbox.runjs.cn/show/pdcmc2pz

前段时间有圆友指导我们写的代码可以直接预览啦。。。真的不错啊。

深入研究一把

以一句话评价我第一个响应式布局:浅,实在是浅到没边了,本来也想装下高手,找个图做做来的说,但是真没找到什么合适的图,而且做响应式布局时候,应该会做多张设计图吧,今天至少是没可能这么干了,所以我们现在来看看别人做的:

http://template.precise.itembridge.com/

这是一个不折不扣的优秀响应式布局的网站,我们现在来“翻译翻译”,我给翻译翻译。。。。人家这可是真资格的响应式布局网站,我这水货也说不出来什么,就简单看看其css吧。

他这里方便管理,单独引入了一个关于响应式布局的css:【CSS我未写进来,有点大】洋洋洒洒几千行啊,我这个页面加载速度都被他拖垮了所以就给删除了。。。

由此可以看出要做响应式布局的代价还是很大的,但是我说了这么多还是没有什么帮助呢,那只好将我做的第二个布局拿出来试试手了。。。。

【实战HTML5与CSS3】免费制作威客页面啦(附源码)

我们这里将原来的代码改一改,去掉多余的东西,方便操作,毫无疑问,这个图和响应式布局没有一毛钱关系,于是我们现在需要操作一下下,代码就直接写到页面中了,看看怎么才能把它变成响应式布局。

百分比布局

以现在响应式布局的方式来说,固定宽度布局不太可取,我这里需要将原来的网页改为百分比布局,这里有一个公式:

目标元素的宽带/上下文元素的宽带=百分比宽度

原来的代码为了方便今天的课题,我将原来的很多代码都删除了,最后变成了这样子:

现在HTML

代码少了2/3呢,好了我们来简单看看代码先,最外层为wraper布局,设置了宽度为960px,这里先不管他了,我们看看其他的地方,将有数字的全部变为百分比,最后形成的css是这样的:(本来字体该使用em的,我这里就暂时不管了,留待下次解决吧)

PS:真要动手的时候你会发现还是有点不好搞的。。。

css

html

结语

今天奋战了一天,居然就形成了这点东西,而且没什么水平,明后天还是需要从无到有的设计三个图,然后实现才能真正达到响应式布局。

如果你觉得这篇文章还不错,请帮忙点击一下推荐,谢谢!

代码下载:http://files.cnblogs.com/yexiaochai/16%E5%B8%83%E5%B1%80.zip

分享到:
评论

相关推荐

    探索HTML5第二弹(下)

    }2567次浏览 评价:好中差  响应式布局(上),让我们一起来响应式布局吧前言第一次看到响应式布局这个东西的时候,我还以为又出了新东西呢,稍微研究了下才发现其实也是现有资源的组合而出的创新,中国...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    4.3.1根据适口属性设计响应式布局: 26 4.3.2同分辨率范围内的流式布局设计 26 4.3.3移动端viewport属性设定 27 4.3.4组件样式的渐进增强设计 27 4.4 本章小结 27 第五章 认我测在线检测服务系统设计 29 5.1认我测...

    JAVA上百实例源码以及开源项目

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

    JAVA上百实例源码以及开源项目源代码

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

    java源码包---java 源码 大量 实例

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

    java源码包2

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

    java源码包3

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

    java源码包4

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

    成百上千个Java 源码DEMO 3(1-4是独立压缩包)

    5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...

Global site tag (gtag.js) - Google Analytics