快速业务通道

响应式网页设计和移动互联网

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-22

个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下。

上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT

移动互联网的现状和未来

在说到这个话题前,我们先看下网页设计和前端开发的现状:

  1. 全球有超过53亿手机用户(包括传统手机)
  2. 国内3G用户超过1亿
  3. iPhone4手机在2010年出货量超过3000万部;
  4. iPhone 4S上市前3天卖掉400万部;
  5. Android手机每天激活超过50万部;
  6. iPad出货量已经超过2.5亿部;
  7. 预计到2015年,移动互联网的数据流量将超越桌面端的流量
  8. 。。。

嗯,大家也许已经开始注意到,自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临,现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么,什么是响应式网页设计?

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的!

或许大家之前会注意到,有很多知名网站都推出了iPhone或针对只能手机的专门网站,比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗?来让网站在每个设备中得到相应的视觉风格和操作体验?

这样势必就要增加很多的工作量,而且很多还是重复的。

我们在做页面的时候,一般很强调模块化的概念,我们要求一个合格的模块要能够“可扩展、无侵染”,它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配,而不用为每个设备单独做个子网站!

但是,产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样,甚至要像素还原——WTF!不同的浏览器本身的功能、行为和处理方式都不一样,为什么要表现完全一样?!

let the browser flow…

怎么做?

其实响应式网页的实现很简单,都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的,而它们自带的浏览器都

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号