在公司的做的关于“移动互联网之响应式设计”分享，以下简要内容，记录如下

1.移动互联网的现状

2.Web App和Native App 之争

Web App

优点

开发成本低，周期短

零部署，方便更新和升级

缺点

性能、用户体验受制于浏览器的实现

难以应用手机的高级功能，如照相、重力感应等

Native App

优点

能最大化挖掘性能潜力

能够运用手机的所有开放特性

能够不断改善用户体验

缺点

平台差异大，开发难度大，成本高、周期长

让用户安装客户端是个不低的门槛(我不会为了看你的网站而下个App吧，)

解决办法：[Hybird App] Web App 开发框架 JQTouch、jQuery Mobile 和PhoneGap(GeoLocation，Camera)

3.什么是响应式设计(Responsive Web Design)?

简单来说是由Ethan Marcotte在2010年提出的名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计，也是为用户体验的考虑)

4.怎样去响应式设计

我们最先想到的应该是宽度使用百分比%，如果只有这样他并不能解决实际问题

首先

a .在头部加一个viewport的标签

width=device-width：当前网页的宽度是用户手机屏幕的宽度

initial-scale=1.0 ： 原始缩放比例，1表示不缩放

user-scalable=no : 禁止用户缩放屏幕尺寸

b.media query(媒体查询)

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

#fixedInput{

width:57%;

}

}

当浏览器的屏幕尺寸最大不超过320px，单独执行的代码

如果这样的代码比较多的话，可以这样写，选择性加载CSS样式

c.图片的自适应

img{

max-width: 100%;

height: auto;

width: auto9; /* ie8 */

}

d.流动布局和定位

页面中使用float浮动，这样会随着屏幕的大小浮动。

有时候使用定位position:abosulte;效果会更佳

5.响应式设计的不足

a.加载过多的资源，比如 自适应的图片都比较大，小屏幕手机仍是加载同样的图片，浪费流量

b.增加开发成本 有的代码至少写两遍 css的

c.不同屏幕的手机视觉体验归根到底还是有差别的

解决办法：

技术上

使用离线存储，缓存不经常更新的资源比如js、css logo图片等;

根据不同的屏幕加载不同尺寸的图片

策划上

设计时是以手机界面为主，pc端为辅