在公司的做的关于“移动互联网之响应式设计”分享，以下简要内容，记录如下
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端为辅
【移动互联网之响应式设计】相关文章：