响应式web设计浅析

响应式web设计浅析ResponsiveWebDesignPart1：为什么需要响应式web设计Part2：什么是响应式web设计Part3：优势OR不足Part4：移动终端屏显两要素Part5：设计流程Part6：设计师需知Part7:开发者需知目录Part1为什么需要响应式web设计各种屏幕尺寸各种浏览器各种操作系统各种访问设备移动设备发展突飞猛进53亿400万50万2.5亿超越手机用户iPhone4s上市前三天安卓每天激活Ipad出货量2015年流量超过桌面端客户需求3g.m.wap.响应式web设计解解决方案Part2什么是响应式web设计简言之，就是一个网站能兼容多个终端什么是响应式web设计Part3优势0R不足非响应式web设计：视觉不统一，非最佳视觉？响应式设计：多终端视觉和操作体验非常风格统一节约成本¥开发成本节约20%-30%维护成本轻松很多相比较手机定制网站，流量稍大但比较加载一个完整pc端网站显然是小得多兼容性移动带宽流量不足低版本浏览器兼容性有问题Part4移动终端屏显要素移动浏览器内核webkit内核IOSAndroidBada(三星)BlackBerryOS6WebOS(palm)S-class(LG)S40/60(Nokia)OperaMobile:PrestoFirefox:GeckoBlackBerryold:MangoGeckoMicroB(meego):/mobile/browsers.html常见设备系统参数(竖屏)iPhone宽：320高：480iPad宽：1024高：768Android宽：320高：533WinPhone宽：300高：500数据仅供参考Android系统开源，设备生产商定制化较多ipad：1024*768ipad2：1024*768新ipad：2054*1536Iphone3g：320*480Iphone3gs：320*480Iphone4：640*960Iphone4s：640*960480*800（分辨率：480*800）情况下屏幕分辨率：屏幕分辨率：屏幕分辨率：屏幕分辨率：按坐标系统显示原理，设备浏览器也在设备坐标系统规范之列，但实际使用中，网站内容显示并没符合坐标系统规范问Iphone4宽：320pointsViewport-答通过viewport把自己冒充成更宽的屏幕宽：980pxmetaname="viewport"content="width=980px常见设备viewport数值iPhone980iPad1024Android980WinPhone1024（分辨率：480*800）情况下Viewport可自定义<meta

name="viewport"

content=“width=device-width;/yhuang/archive/2012/04/03/responsive_web_design.html#MV宽度=设备宽度<meta

name="viewport"

content=“width=320;宽度=320px<meta

name="viewport"

content=“width=960;宽度=960px响应式web设计原则：禁止浏览器按viewport响应按设备坐标系统宽度显示Part5设计流程用户研究与设备规格预估1框架原型规划2PSAI视觉设计3∞CSSJS前端构建4∞Part6设计师需知触屏移动设备基础手势动作移动web设计优先/ff/entry.asp?933轻UI设计重内容设计文字可读性页面文字字号可延续桌面端设计大小更高12px11px10px响应式图片显示内容设计/保证宽度缩小后图片内容可读性与视觉美观/index.php/es/inicio响应式宽屏图片设计无CSSHover状态交互形式的操作习惯更符合手指点触操作-又大又平系统对flash的兼容性不佳避免用flash，html5响应式web设计原则：禁止浏览器按viewport响应按设备坐标系统宽度显示

苹果iPhone人机界面指南推荐的最小目标大小为44px宽，44px高。微软的Windows一个最低目标尺寸是26px乘以34px.诺基亚的开发者指南建议，目标尺寸应不小于1cm×1cm平方或28×28像素。来自各移动平台的设计指导方针当几个小触摸目标彼此靠得比较近时，用户会不小心触到邻近的目标而引发意外操作。而拇指触屏时导致的错误会更明显，因为它的尺寸是最大的。所以有时用户会倾斜拇指，让其侧身去触及屏幕目标，这是一个很不必要的操作。小的触摸目标会导致操作错误厂商建议的尺寸Apple’s

iPhone

Human

Interface

Guidelines建议最小尺寸为44x44pixel，Microsoft’s

Windows

Phone

UI

Design

and

Interaction

Guide建议

34x34pixel，Nokia’s

Developer

Guidelines建议28x28pixel响应式设计的界面气质1.保持用户对页面专注力，让人一目了然如何使用你的内容2.避免噪音、无用的留白、花里胡哨的背景，避免用户被内容以外的视觉信息干扰。3.尽可能减少用户的输入，记忆用户信息；有策略地向用户提请求，简洁表达必要信息4.简洁明确地提示引导性操作（如新手任务、操作指引、功能介绍）和中断性操作（如提示、询问）。5.

避免不必要的交互6.触屏界面显著的气质表现为：足够响应范围的控件和文字链接圆角纸张化的扁平风格与相对立体的按钮页面中常见图文混排css3的应用减少图片的使用。屏幕高度大于页面高度时的页面拉伸问题考虑屏幕过长或者过短带来的影响，确保长屏幕时，页面的全屏。设计者应考虑，工具栏，导航栏状态栏变化显示或隐藏的情况Part7开发者需知技术实现

主要实现方法是CSS3

MediaQuery，以JS来辅助，HTLM5标签并不是必须的。使用方法：@media

设备类型

and(设备特性){

样式代码

}设备类型值设备特性Mediaquery兼容的浏览器IE6，7，8兼容Mediaquery：<!--[ifltIE9]><scriptsrc="/svn/trunk/css3-ediaqueries.js"></script><![endif]-->CSS3MediaQuery引入方法

1link方式：<linkrel="stylesheet"type="text/css"href="css/style.css"media="alland(max-width:340px)"/>2xml方式:<?xml-stylesheetrel="stylesheet"media="alland(max-width:340px)"href="css/style.css"?>3@import方式：@importurl(example.css)screenand(min-width:800px);/*IE7及更早浏览器不支持@import*/4@media方式：/**适配Ipad*

*/@mediaalland(max-width:780px){

font-size:18px;}/**适配Iphone*

*/@mediaalland(max-width:340px){

font-size:12px;}响应式设计的制作原则

1不使用绝对宽度2建议使用相对大小的字体（em）(em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：

1.em的值并不是固定的；

2.em会继承父级元素的字体大小。3.px是绝对单位，

em是相对单位;可随页面缩放。保证缩放时候的整体性。)3流动布局（fluidgrid）所谓"流动布局"，就是各个区块的位置都是浮动的，不是固定不变的。

.main{

float:right;

width:70%;

}

.leftBar{

float:left;

width:25%;

}4.根据mediaquery来设置CSS5图片的自适应（fluidimage）已知屏幕分辨率如下：@media(max-device-width:1280px)and(orientation:landscape){}@mediascreenand(max-width:1028px){

}@mediascreenand(max-width:1024px){

}@mediascreenand(max-width:960px){

}@mediascreenand(max-width:854px){

}@mediascreenand(max-width:800px){

}@media(max-device-width:768px)and(orientation:portrait){}@mediascreenand(max-width:640px){

}

@media(max-device-width:600px)and(orientation:portrait){

}@media(max-device-width:480px)and(orientation:portrait){

}@mediascreenand(max-width:360px){

}@mediascreenand(max-width:320px){

}

移动平台系统特性分析

iPhone和Android浏览器都是Webkit内核。不支持Flash和Java（包括JavaApplet）不支持插件(iPhone)不支持基于浏览器的文件下载，但Android支持zip包下载！不支持插入本地文件，即不支持<input/>上传文件。（ios6.1以下版本）节省缓存。iPhone仅支持小于25kb的缓存支持cookie界面的动态交互则可利用JavaScript来实现支持播放html5视频支持表格、CSS3高级样式表Ajax动态异步请求与局部刷新。Opra浏览器是个异类采用Prest