首页 > 建站资源 > 网站运营 > 自适应网页设计:不同的设备呈现同样的网页

自适应网页设计:不同的设备呈现同样的网页

时间:2012-05-02    来源:阮一峰博客

随着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上面有更多这样的例子。

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

相关推荐
用户体验之网页板块设计深度解析
超高销售额的成功单页设计三要点分析
网站案例分析之谈首页设计的可用性和PET
网站设计教程:从构建页面到组织架构
QQ空间V6设计分享之设计中的继承与颠覆
B2B行业网站首页设计经验分享
B2B行业网站的页面设计经验分享
网页设计教程:如何打造一个大气的企业网站?
网页设计教程:网页首屏高度定多少合适?
什么是响应式网页设计?
向用户清晰表达信息是视觉设计的主旨
网页设计中的文字排版、选择等字体设计经验
如何简化网页设计让重点内容更突出?
响应式页面设计的四个要点分享
网站设计技巧:针对不同年龄阶段用户的设计思路
16条PS网页设计经验技巧分享
网页自适应布局设计案例参考
响应式网页设计的优缺点分析
如何在6个月内自学成才成为一个互联网设计师?
网站设计必须避免15个用户体验最差的缺点
用户需求加页面美观:网站首页该放些什么?
电商网站折扣商品价格的显示优化技巧
从电商网站应用设计中学到的九个成功秘诀
9个最新网页设计趋势分享
网页设计新趋势:关于web字体的那些事儿
如何改进网页设计?试试眼球追踪技术吧!
非科班出身的我是如何成为一名设计师的?
对话谷歌交互设计师:Google是怎么做设计的
网站策划:网页设计中7个令人抓狂的错误
经验分享:网页设计的10个常见误解推荐
站长实践:如何设计出符合优化要求的网页
电子商务网站设计分析五:商品列表页设计
经久不衰!网页响应式设计的现状与趋势
电子商务网站设计分析六:商品详情页设计
向Booking学习:设计最具说服力的页面
搞定小屏!5大黄金准则帮你设计移动端邮件

精彩推荐

热门教程