《《响应式web设计》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《响应式web设计》PPT课件.ppt（54页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、响应式web设计浅析Responsive Web DesignPart1：为什么需要响应式web设计Part2：什么是响应式web设计Part3：优势OR不足Part4：移动终端屏显两要素Part5：设计流程Part6：设计师需具备的意识目录Part1为什么需要响应式web设计 各种屏幕尺寸各种浏览器各种操作系统各种访问设备移动设备发展突飞猛进53亿 400万 50万 2.5亿 超越手机用户iPhone4s上市前三天安卓每天激活Ipad出货量2015年流量超过桌面端 客户需求响应式web设计解 解决方案Part2什么是响应式web设计简言之，就是一个网站能兼容多个终端 什么是响应式web设计P
2、art3优势0R不足非响应式web设计：视觉不统一，非最佳视觉？响应式设计：多终端视觉和操作体验非常风格统一兼容当前及未来新设备未知设备已知设备节约成本开发成本节约20%-30%维护成本轻松很多相比较手机定制网站，流量稍大但比较加载一个完整pc端网站显然是小得多兼容性移动带宽流量不足低版本浏览器兼容性有问题一般适用情况响应式web设计独立移动网站重内容例如：形象展示重功能例如：电子商务Part4移动终端屏显要素移动浏览器内核webkit内核IOSAndroidBada(三星)BlackBerry OS 6WebOS(palm)S-class(LG)S40/60(Nokia)Opera Mobi
3、le:PrestoFirefox:GeckoBlackBerry old:MangoGeckoMicroB(meego):2048 x 1536iPad2全新iPad1024 x 768iPad2 跟New iPad屏幕分辨率不同为什么两者对app及网站的显示内容尺寸一样？问-所有移动设备显示基础坐标系统坐标系统屏幕分辨率高：480points宽：320points高：960px宽：640px例如iPhone4：答常见设备坐标系统参数(竖屏)iPhone宽：320高：480iPad宽：1024高：768Android宽：320高：533WinPhone宽：300高：500数据仅供参考Andro
4、id系统开源，设备生产商定制化较多ipad：1024*768ipad2：1024*768新ipad：2054*1536Iphone3g：320*480Iphone3gs：320*480Iphone4：640*960Iphone4s：640*960480*800（分辨率：480*800）情况下屏幕分辨率：屏幕分辨率：屏幕分辨率：屏幕分辨率：按坐标系统显示原理，设备浏览器也在设备坐标系统规范之列，但实际使用中，网站内容显示并没符合坐标系统规范问Iphone4 宽：320pointsViewport-答通过viewport把自己冒充成更宽的屏幕宽：980pxmeta name=viewport co
5、ntent=width=980px常见设备viewport数值iPhone980iPad1024Android980WinPhone1024（分辨率：480*800）情况下Viewport可自定义metaname=viewportcontent=“width=device-width;http:/ Hover状态交互形式的操作习惯更符合手指点触操作-又大又平系统对flash的兼容性不佳避免用flash，html5响应式web设计原则：禁止浏览器按viewport响应按设备坐标系统宽度显示在设计端获得移动端相同视觉大小的画布1，计算设计用显示设备dpi手机屏幕手机屏幕dpi计算公式计算公式:http:/ dpi计算工具计算工具:http:/ u