分类

自适应网页设计(Responsive Web Design)

作者: 阮一峰

日期: 2012年5月 1日

随着3G的普及,越来越多的人使用手机上网。

移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

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

于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

一、"自适应网页设计"的概念

2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

如果屏幕宽度在400像素以下,则6张图片分成三行。

mediaqueri.es上面有更多这样的例子。

这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。

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

"自适应网页设计"到底是怎么做到的?其实并不难。

首先,在网页代码的头部,加入一行viewport元标签

  <meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js

  <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->

三、不使用绝对宽度

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

具体说,CSS代码不能指定像素宽度:

  width:xxx px;

只能指定百分比宽度:

  width: xx%;

或者

  width:auto;

四、相对大小的字体

字体也不能使用绝对大小(px),而只能使用相对大小(em)。

  body {
    font: normal 100% Helvetica, Arial, sans-serif;
  }

上面的代码指定,字体大小是页面默认大小的100%,即16像素。

  h1 {
    font-size: 1.5em;
  }

然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

  small {
    font-size: 0.875em;
  }

small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

五、流动布局(fluid grid)

"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

  .main {
    float: right;
    width: 70%;
  }

  .leftBar {
    float: left;
    width: 25%;
  }

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

另外,绝对定位(position: absolute)的使用,也要非常小心。

六、选择加载CSS

"自适应网页设计"的核心,就是CSS3引入的Media Query模块。

它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

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

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

  <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文件中加载。

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

七、CSS的@media规则

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

  @media screen and (max-device-width: 400px) {

    .column {
      float: none;
      width:auto;
    }

    #sidebar {
      display:none;
    }

  }

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

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

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

这只要一行CSS代码:

  img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

  img, object { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:

  img { width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令

  img { -ms-interpolation-mode: bicubic; }

或者,Ethan Marcotte的imgSizer.js

  addLoadEvent(function() {

    var imgs = document.getElementById("content").getElementsByTagName("img");

    imgSizer.collate(imgs);

  });

不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

(完)

珠峰培训

简寻

留言(101条)

总结的不错,是博主翻译的吗?还是原创的?

好文章。扩展知识面了。

不错不错,正在想自适应主题是怎么做的,没想到这里就有答案。

在阮兄的博客总能找到好的东西

阮老师的帖子不错!
现在好多ASP说自己的产品实现不了自适用,
并且还是国内的大企业,不知道国内的产品到底离人家有多远!

twitter的开源项目bootstrap
用于自适应设计也挺不错,只是对IE6以下的浏览器支持不是很好

阮兄怎么现在变成电工男了?你本职工作是这个么?
我还是觉得以前的文风好些!

老师我爱你,这篇帖子太及时了

关于响应式Web设计,可以看看BeForWeb之前发布的一些文章:http://beforweb.com/taxonomy/term/7

这文章有意思,不同屏幕的设备需要不同的网页相适应,很有用的信息

原文应该是Ethan Marcotte的这篇经典文章 http://www.alistapart.com/articles/responsive-web-design/
现在国内的web开发者一般都把responsive web design译作“响应式web设计”,正如文章中前两句话所提到的背景:responsive web design的概念是移动触控设备web应用的繁荣而催生的,所以感觉“响应式”更贴切一些吧。

我只能万分感激了!!

受益匪浅,谢谢

好几天前就看到过了,确实是一篇不可多得的设计好文,翻译或转载,请注明,谢谢!!!

很棒的文章!最近正在找自适应网页设计方面的资料,谢谢!!自适应邮件设计也很重要,因为越来越多人用手机收邮件了:),iPhone/iPad有自动缩小邮件的功能,不过Android和黑莓(还有大多数手机)大概还没有这个功能,所以想有很棒的邮件效果,比如带图片的邮件等。

不能普遍适用,百度首页、新浪首页等等这些主页,怎样能做到即保证信息量,又做到排布合理?
不仅要考虑实现成本,还要考虑显示、交互效果。
还是“为不同的设备提供不同的网页”这样的方式靠谱一些。

引用yingying的发言:

自适应邮件设计也很重要,因为越来越多人用手机收邮件了:),iPhone/iPad有自动缩小邮件的功能,不过Android和黑莓(还有大多数手机)大概还没有这个功能,所以想有很棒的邮件效果,比如带图片的邮件等。

出于安全考虑,通常邮件中的图片都不被显示。

不适合信息量非常大的网站,个人认为不实用性有以下几条:
1.无法保证跨浏览器兼容性问题。
2.设计图的高保真还原,布局方式,排版方式,以及页面的交互
3.相对而言与其他布局方式的实现,有一定的门槛。制作成本相对较高。
只是个人愚见..

这个想法不错,对于文字的自适应,我感觉没什么必要吧。12或者14的字体可以打遍天下了

我觉得不错,以后如果有更好的IDE环境了,那是相当省事儿,目前来说自适应网页设计还是开发维护成本比较高。

jqm自适应网页大小。

看来我只能看看了事了,不过还是谢谢,希望相关主题快些出来。

刚对自己的个人网站进行了“响应式”改版,对不同设备展示不同宽度页面。

引用Kevin的发言:

阮兄怎么现在变成电工男了?你本职工作是这个么?
我还是觉得以前的文风好些!

怎么是"电工男“,这明显是挨踢男,页面仔

写的很好,以至于我一看就懂了,作为前端,得学会这个,现在平台太多了

现在很多网站还是做了不同版本的网站,比如手机浏览,会直接转到http://m.xxx.com/等的~

博主,您好,我是新接触自适应网页设计的,对于您说的那个软件该怎么使用呢?我点击链接后,到那个网址,然后选择好所需要的大小后,点击generate,然后再点下面的链接,跳转到一个新的界面,但是是空白的各种屏幕大小的界面,我该怎么操作使得我能查看我所需要测试的界面在不同屏幕下的效果,本人愚钝,请博主指点,时间比较急,所以希望博主看到后能回复,感激不尽!

自适应能实现:一行规定死图片数量并在不同浏览器下都兼容的效果吗?
而且还要不能有下面的滚动条

http://beforweb.com/node/6
c7210 发表于 2011-10-01 21:05

c7210是博主吗?如果不是,有点不厚道啊。。。

引用Hao.Wu的发言:

现在国内的web开发者一般都把responsive web design译作“响应式web设计”,正如文章中前两句话所提到的背景:responsive web design的概念是移动触控设备web应用的繁荣而催生的,所以感觉“响应式”更贴切一些吧。

其实个人觉得“自适应网页设计”更通俗易懂。目前国内很多人都翻译成“响应式”,相比没有“自适应”通俗易懂。

极端点用wp-touch插件搞定

代码我不懂,不过Wikipedia在浏览器窗口大小改变的时候文字就会重新排版。

正好这几天在切html5的页面,要求宽度自适应,学习了!

不能给绝对宽度,这个很不方便

引用留依的发言:

博主,您好,我是新接触自适应网页设计的,对于您说的那个软件该怎么使用呢?我点击链接后,到那个网址,然后选择好所需要的大小后,点击generate,然后再点下面的链接,跳转到一个新的界面,但是是空白的各种屏幕大小的界面,我该怎么操作使得我能查看我所需要测试的界面在不同屏幕下的效果,本人愚钝,请博主指点,时间比较急,所以希望博主看到后能回复,感激不尽!

把generate拖曳到bookmark(收藏夹)。每次开启某个网页的时候,只要点那个标签就行了

引用留依的发言:

博主,您好,我是新接触自适应网页设计的,对于您说的那个软件该怎么使用呢?我点击链接后,到那个网址,然后选择好所需要的大小后,点击generate,然后再点下面的链接,跳转到一个新的界面,但是是空白的各种屏幕大小的界面,我该怎么操作使得我能查看我所需要测试的界面在不同屏幕下的效果,本人愚钝,请博主指点,时间比较急,所以希望博主看到后能回复,感激不尽!

你可以到www.responsive8.com进行测试,什么软件都不用安装。直接输入网址或者URL就可以了,非常方便。

受益匪浅,谢谢您的文章。

太厉害了,一直找都找不到好的解决方法,学习了,谢谢!

css3-mediaqueries.js。

据说这个是css3的?

文章中的案例我是过了,有问题,在iPad上,如何是横着打开的,竖着看,是不会自适应的,需要刷新。页面还是需要多调试改进。

博主实在太给力了,讲的通俗易懂,而且很全面!

明显不是原创,甚至可能不是翻译,而是转载。
却在文章页面还放着付费链接,侵害原作者的著作权,可鄙。

引用Zhery的发言:

明显不是原创,甚至可能不是翻译,而是转载。
却在文章页面还放着付费链接,侵害原作者的著作权,可鄙。

为什么国外有这么多开源的东西?因为人家物质太多了,吃饱了撑着,没事做就搞点开源吧,中国为什么不搞开源?或者开源总有这么样那样的阴谋在背后?因为物质少,大家都吃不饱。为什么中国人喜欢侵害原作者的著作权?那首先要回答为什么中国人物质少?后面的问题解决了,前面的问题才能解决,后面的问题不能解决,前面的也就不是什么问题。中国人就是要侵害著作权,就是要用盗版,这是很合理的。 你唯一能做的就是,不要写这种东西,不要翻译这种东西,自然就不存在侵害了。

学到很多。谢谢

谢谢博主!你这篇博文图文并茂得讲述了media query,上面的那几张图片就已经告诉我诸如@media screen and (max-device-width: 400px)这样的语句要用在什么情况下面了!

非常好的文章,好文要评论、支持!

不错的文章,受益匪浅。

我切好的图片,在Android手机上可以,但用苹果手机测试的时候有一个页面的图片之间有2~3个的像素空白,求助

准备参考这篇文章重新布局一下自己的博客..

我想问哈,如果要根据分辨率大小自动选择不同分辨率的图片,又该如何实现?

谢谢老师分享!灰常有帮助!简单易懂!

我想问,你这个网站是个人自己建设的博客吗?从前端到后台,还是怎么来着呢

老大 css3-mediaqueries 这个js没用啊 不知道你测试过没有~~

那兼容低级浏览器的插件我用了 完全没效果啊 求解~~!我还下了个网上的例子他那个例子也不行~~

好样的。。学习了。。

1、背景自适应100%怎么做到?
2、固定高度背景怎么办?

博主行高要如何设置,我就是查行高来着,各个设备行高不同

实用,一边用,一边学,谢谢分享!

太酷了,最近正好需要这个,因为我做的软件要在pc和手机都能用才行。我还愁呢。

我的博客现在已经用上的响应式主题了,有对响应式感兴趣的朋友可以一起交流一下这方面的经验。

赞一个!
先收藏,以后一定会用到!

我想问下 那段兼容ie9一下的代码 貌似没用!

请问为什么要用相对字体大小呢?换算过来还不是绝对px吗?比如一个div{width:30%;height:30%},如何使用相对字体大小保证字体不溢出div之外呢?

No offensive, just curious: 为啥现在这个网站,在手机访问还是不够自适应呢?

挺好用的,不过还没试

非常感谢你的分享,其中针对IE9以下响应式的js解决了我遇到的难题,非常感谢~祝工作顺利~

写的真是太好了,受益匪浅啊

文章浅显易懂,很不错

好文!
第一步代码放上去就让我的lp有个样子了。

文章讲得很好,如果有一个基础的系统一点的指导教程就安逸了。

受益匪浅,以后会常来的,话说浮动那里不太懂,一会儿还得好好了解一下。

大师?能写写手机网页的触屏滑动效果怎么做吗?用zepto框架还是jQueryMobil框架好呢?有哪些需要注意的吗?求大师指点啊

能否把那几个不同屏幕的CSS文件发给我,万分感谢!!

响应式还是很实用的功能

搜到自适应直接到你的文章,给力啊

像素也可以的吧 主要是看你怎么控制

请问 针对移动端的web页面 像素对应的用em单位? 那边框宽度呢

文章写的很好,思路很清晰。感谢

很好 正在研究 话说这都是12年的了 网上还不怎么好找

很好的文章,但这是根据原文翻译的吗?

写的太好了,透彻

虽然是很早的文章 依然收益匪浅 !支持博主!

作者在12年已经预见到现在的情况了,佩服

我现在分不清楚 响应式布局和自适应
自适应不是那种,浏览器窗口减小, 里面的容器 div 元素 img 等跟着同步减小的吗???

我现在在国外主要就是responsive design的开发,由于国内很多人还在用IE8以下的版本,所以responsive design 很难做到与IE 低版本的完全兼容。 开发成本也很高。即使能够运行了,其效率也会大打折扣。
不过从IE9版本以上就好很多了,尤其是其对于 transform的支持,以及对于responsive的支持,其美观和性能也大大提升。

2016年 1月份以后 微软就不再支持IE8了,对于开发者来说是个好消息。但是对于国内好多人用盗版系统,IE并不会强制升级,其实还是比较坑的。

测试小工具没找到哪个入口下载啊?求大神指点

总结的很到位全面,希望以后多多发布关于前台的文章,希望大神级的任务多多指点

看了範例網站後發現一個問題~
所有width的值都是小數點,這顯然不是手動輸入的
寬度值一有不對,整個版型就亂掉了~
怎麼沒人提到這個問題呢?

請問一下知道的人,寬度值是怎麼決定的ㄋ?

华而不实,“自适应?”,不过是自己的一厢情愿,如果真能“自适应”,还要那么多移动端人员开发干什么?

一种技术手段而已

图片的尺寸如何设置?

你这个页面貌似就是自适应的,我把你的页面全部抠下来没问题吧

您好,安装了推荐的Responsive Design bookmarklet 插件测试福尔摩斯历险记的网站
http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html,

为什么没有出现您所说的自适应效果?(图片始终是两排,导航栏也没有变到顶部呢?)

推荐一个响应式测试工具 [ 跨屏测 ] http://kuapingce.com/

引用Allen的发言:

总结的不错,是博主翻译的吗?还是原创的?


不知道,只是看到贵网站权重好高。就来看看学习了

好文章,一直苦于这方面,找到方向了。

虽然写的早,对小白还是很有帮助,good

楼主,responsive应该翻译成响应式,而不是自适应(adaptive)。

JXADF是一个不错的自适应开源开发平台,开发一次,桌面、手机端都能适应,不需要特别处理。

找到原主了,膜拜大神

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接