谈谈响应式和自适应的区别

在谈到响应式与自适应的区别之前,我先提一下目前常见的四种网页布局:静态、自适应、流式、响应式。

一、四种布局:

1、静态布局(Static Layout)

即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布局,使用不同的域名如wap.XXX.com或m.XXX.com(在零几年,当还在用诺基亚、LG等手机时,还记得qq家园吗?登录手机腾讯网的时候你们一定记得!当时腾讯是为每个品牌手机分了不同的域名来访问,不同的域名代表了不同的网页设计,诺基亚访问时是3g.qq.com,中兴的手机则访问wap.qq.com.)。

2、自适应布局(Adaptive Layout)

自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。你可以把自适应布局看作是静态布局的一个系列(主要是宽度自适应)。

3、流式布局(Liquid Layout,也称液体布局)

流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

4、响应式布局(Responsive Layout)

分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理,即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

综合以上,请结合后面链接展示的实际效果,来更好地理解这4种布局。四种布局动态演示:http://wow.techbrood.com/fiddle/1753

二、响应式的发展

响应式可谓是后起新秀,在之前是没有响应式这个说法的,自适应布局主要是宽度自适应,后来开始用css hack技术来适应众多浏览器。最后,放弃 hack 技术,使用渐进增强的开发方式,发展成了响应式布局。在谈区别之前给大家了解一下响应式是如何出现的:

起初,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800 850 870 880。后来随着显示器越来越多,以及笔记本的普及,这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局,大多指的就是宽度自适应布局。在这种布局下,出现了两派:

1、百分比宽度布局 2、流式布局

第一派,宽度使用百分比,文字使用 em。第二派的布局以 iGoogle 为代表(已经停止)。再后来,浏览器大战 时代,firefox、Oparo、Chrome、qq浏览器等的出现,结束了 IE 一统江湖的局面,N 年没有更新的 IE6 发布了新版本,以前已 IE 为标准的 CSS 向 W3C 标准趋近,随后各种针对浏览器的 css hack 技术出现。

虽然浏览器这么多,但是响应式布局依然不是主流,人们还在使用 css hack 技术适应这些浏览器。注意我的用词——「不是主流」,虽然不是主流,不代表当时不被使用。比如一向超前的伟大的 Google。当时没有响应式布局这个词语,但是慢慢出现了一个词——渐进增强,新词的出现总是伴随的旧词一起出现。就好比 3G 出现之前,没人管自己的手机叫 2G,所以,3G 和 2G 两个词是一起出现的(技术上当然2G技术先出现)。最后,放弃 hack 技术,使用渐进增强的开发方式,发展成了响应式布局。

同理,渐进增强出现后,另一个词「优雅降级」也随之出现了。词的意思可以自己看 wiki、Google,我只在这儿举一个例子,gmail 和 qqmail,他俩的宽度都是 100%,都是自适应。但是:qqmail 就是 css hack 的完美体现,你用任何一个浏览器,几乎可以看到同一个样子的邮箱,腾讯的前端工程师们用各种 css hack 技术来展示邮箱页面,为的是统一的用户体验。而 gmail 使用了渐进增强,你的浏览器越强,你看到的效果就越好,用户体验就越好。

再后来,就是大家都熟知的 Google 发布了 android,于是互联网大战从 PC 打到了手机。还有 HTML5 标准的发布。手机虽然屏幕变小了,但是却提供了更丰富的功能。我上文提起过,还记得以前用诺基亚上 QQ 的事儿吗?我们访问的是 3g.qq.com,而中兴的手机访问 wap.qq.com,在后来的智能手机都是访问 m.qq.com。

不禁有人问「真的需要为每个手机分别设计一个网页吗?」、「真的需要为手机和电脑设计不同的网页吗?」,解决方法当然有很多种,可以看看 css zen garden 相信做过前端的都看过这个网站,一个神奇的网站。最终的解决方案胜出者是响应式布局。

响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。Google 第一次完成了从先驱到烈士。

Google 为了解决 android 界面的不统一问题,决定对 android 界面的设计进行规范,这种设计会让 android 变得更流畅,因为它放弃了 iOS 系统那种华丽的界面,iOS7 发布后,Google 完成了第二次从先驱到烈士。 android 开创了扁平化的时代,现在却被指责 android 的图片越来越抄袭 iOS 了。

看看2011年03月22日的文章,Google 官方解释 Chrome logo 变化

三、响应式和自适应的区别

首先两种方式解决问题的是不一样的。自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

17162538_xtDH

自适应

于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小,但是无论怎样,他们主体的内容和布局是没有变的。

17162538_zSZb

响应式

响应式的概念应该覆盖了自适应,而且涵盖的内容更多。并且自适应还是暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤,响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。拿35氪来举例,当屏幕宽度大于800像素(并不一定是800,大约这个数),如下面的图:

b

如果屏幕宽度小于800(大约这个数),则右侧边栏取消,顶部样式也发生了改变,目的就是重新设计了样式从而对用户友好。如下图:

a

mediaqueri.es网站有很多这样的例子。

四、响应式如何实现

1、允许网页宽度自动调整

首先在网页代码的头部,加入一行viewport的meta标签(详情请看我的另一篇关于viewport的文章):

1
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

2、尽量少使用绝对宽度,即CSS代码不要用px指定宽度。

3、相对字体大小

字体也不能使用绝对大小(px),而只能使用相对大小(em)或者高清方案(rem),rem不局限于字体大小,前面的宽度width也可以使用,代替百分比。

4、用流动布局(fluid grid)

即各个区块的位置都是浮动的,不是固定不变的,上文提到的一个响应式的三个图就是很好的一个例子。float的好处是:如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。另外,绝对定位(position: absolute)的使用,也要非常小心。

5、选择加载CSS

就是CSS引入的Media Query模块(也就是媒体查询啦)。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

1
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css" />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载Screen.css文件。

1
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

除了用html标签加载CSS文件,还可以在现有CSS文件中加载:

1
@import  url("Screen.css") screen and (max-device-width: 400px);

6、CSS的@media规则

同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

1
2
3
4
 @media screen and (max-device-width: 400px) {
    .column {float: none;}
    #sidebar {display:none;}
  }

上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none),sidebar块不显示(display:none)。

7、图片的自适应(fluid image)

除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

1
img { max-width: 100%;}//IE不支持max-width
标签:   |  
时间: 2016年04月27日下午15:18  |  
作者:
LEAVE A REPLY
loading
正在赶回来……