自适应网页设计(Responsive Web Design)
时间:2012-05-02 10:49:07
随着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上面有更多这样的例子。
这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。
标签:自适应,网页设计
0
投稿
猜你喜欢
网站设计中的面包屑[译]
2009-03-22 15:42:00
div水平垂直居中方法(淘宝招聘css题目)
2007-10-25 12:48:00
懒懒交流会:ClassName的长命名 VS. 短命名
2009-11-28 16:08:00
马化腾关于产品设计与用户体验的培训
2009-02-12 11:45:00
用javascript做拖动层布局的思路
2008-05-30 13:38:00
Win7或Windows server 2008中IIS7支持ASP+Access解决方法
2012-03-27 18:31:27
让Entity Framework支持MySql数据库
2010-12-14 15:22:00
JavaScript学习心得之如何走出初学困境
2008-12-24 13:30:00
关注前端开发流程
2009-12-31 17:38:00
开发保留标准的浏览器功能的AJAX应用
2008-02-03 14:03:00
检测SQL Server是否有特洛伊木马
2009-02-24 15:19:00
asp下去除超链接的函数
2011-03-29 11:11:00
ASP UTF-8编码下字符串截取和获取长度函数
2011-03-30 10:52:00
一些实用的sql语句
2009-11-10 20:21:00
悟透JavaScript
2008-05-29 22:15:00
SQL Server 2005日志文件损坏的处理方法
2008-12-02 14:36:00
超链“确认”对话框confirm
2008-05-16 11:42:00
MySQL表设计优化与索引 (八)
2010-10-25 19:46:00
Oracle常用dump命令,记录一下备查。
2009-03-04 10:27:00
在asp中使用js的encodeURIComponent方法
2012-11-30 20:05:53