移动互联网之响应式设计_Div+Css教程--HTML5中文学习网

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

　　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端为辅