随着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:300px;
只能指定百分比宽度:
- width: 98%;
或者
- 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: rightright;
- 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);
- });
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

2012年10月6日 19点00分 1F
鸟哥有微博吗?俺想粉你
2012年10月6日 19点34分 B1
@ arthur 哥比较OUT,不玩围脖,呵呵
2012年10月6日 19点32分 2F
就等着鸟兄升级了呵呵。
2012年10月7日 02点27分 3F
自适应宽度的布局对于像我这些css不太精通的人来说有点难度啊,加上终端的测试也是比较麻烦的把。问下鸟哥有没有考虑做一款自适应宽度布局的主题或者全屏设计的主题了
2012年10月7日 15点51分 B1
@ 东东丫丫情侣博客 这个
https://zmingcx.com/wordpress-mobile-theme.html
2012年10月7日 18点16分 B2
@ 知更鸟 谢谢,好好研究一下,其实我很佩服你能那么无私的分享你的HotNewspro主题,我之前也分享了一个问题,分享之后问题好多,懒得处理,之后就慢慢的懒得分享了,祝鸟哥后半年吉祥,哈哈
2012年10月8日 06点32分 4F
鸟哥辛苦了!
2012年10月8日 08点08分 5F
鸟哥又出原创作品了,恭喜一下。
2012年10月8日 10点55分 6F
鸟哥国庆快乐!
2012年10月8日 19点34分 7F
鸟哥首页的 阅读全文 这个按钮,只能修改dg.png这个文件才能更改颜色么? http://www.leica.org.cn/index.php 这种简单色也挻好看的。它的背景不知道怎么查看。觉得鸟哥以后也可以走这个团队(Clover·四叶新媒体)的路线。设计改变生活。哈哈。
2012年10月8日 22点39分 8F
支持了
2012年10月10日 19点56分 9F
鸟哥,找你有点事情,刚准备跟你写邮件的!但是你已经提示你很少看邮件,上了你微博看下也是很冷清,还请鸟哥告知下联系方式!(vfeet@.com)
2012年10月11日 12点25分 B1
@ vfeet 有事直接在此写
2012年10月11日 15点14分 10F
下一个主题的思路?
2012年10月12日 21点50分 11F
这个功能是很不错的,如果鸟哥能够在新的主题中集成此功能,将是一个很不错的体验!
2012年10月25日 09点30分 12F
这个技术以后肯定是必备的,真的搞前端的就苦逼了
2012年10月25日 19点23分 B1
@ cowtu 发现小鸭子的身影~~
2012年10月25日 21点02分 B1
@ cowtu 说的在理,呵呵
2012年10月31日 08点54分 13F
果断加上链接,每天来看看
2012年12月27日 11点41分 14F
太牛了
2012年12月29日 10点57分 15F
学习了
2013年1月3日 01点44分 16F
学习了,自适应真的很重要,在欧美这边很多网站都需要这个功能以适应不同客户的浏览设备。果断保存
2013年1月12日 14点14分 17F
这个很有用,多设备自适应
2013年1月12日 16点01分 18F
支持鸟哥了,又学习到一点。。
不过这个真的做起来工作量很大。。。先学习中
2013年1月14日 13点30分 19F
支持鸟哥,最近工作忙。现在稍微闲些,来看看!
2013年1月22日 16点26分 20F
前几天做一个网页,自适应手机跟平板,在meta标签里添加几行文字就行了。很不错
2013年3月26日 00点48分 21F
鸟哥。真希望升级个主题啊。两个博客用你的主题。一直有个小疑问就是为什么不整个页面都是灰色的呢。赶脚有利于阅读。。。。
2013年3月29日 10点30分 22F
鸟哥什么时候升级你这个主题啊 弄成自适应的,呵呵!期待
2013年4月7日 12点49分 23F
这个自适应很好~
2013年4月25日 17点13分 24F
鸟哥您好,http://www.1i3i.com/bvb这是我仿的 http://bvb.se 的自适应的网站,文章页面我想要全部是图片,但是我只能调用第一张图片到里面,有什么办法能调用全部的图片到里面吗?
不懂代码的菜鸟向您请教
<img class=”superimage” src=”<?php bloginfo(‘template_directory’); ?>/images/transp.gif” width=”1400″ height=”919″ data-small=”<?php echo catch_first_image(”); ?>” data-medium=”<?php echo catch_first_image(”); ?>” data-large=”<?php echo catch_first_image(”); ?>” data-full=”<?php echo catch_first_image(”); ?>” alt=”<?php the_title();?>” />
2015年3月21日 13点39分 25F
鸟哥什么时候升级你这个主题啊 弄成自适应的,呵呵!期待
2015年3月21日 21点01分 B1
@ movelion 我现在用的主题就是响应式的