Recommended
More Related Content
Viewers also liked
Viewers also liked (16)
Similar to Etao响应式实现小结3
Similar to Etao响应式实现小结3 (16)
Etao响应式实现小结3
- 2. etao响应式实践小结 响应式设计 常见响应式模式及其实现 响应式项目协作流程 常用响应式技术polyfill 响应式之服务端 响应式之移动端 那些年，踩过的一些坑
- 3. etao响应式实践小结 响应式设计 常见响应式模式及其实现 响应式项目协作流程 常用响应式技术polyfill 响应式之服务端 响应式之移动端 那些年，踩过的一些坑
- 4. 响应式设计 响应式设计的概念 （多终端响应） 常用响应式设计的方法（PC优先、移动优先） Etao响应式实践
- 9. Etao响应式实践 Etao首页响应式第一版(12.5.31) （990、1200） 淘宝主搜索（990、1200、1400） Etao点评频道（990、1200） Etao srp（990、1200、1400、1600） Etao首页响应式改版(13.1.1)（750、990、1200） 玩客（320、480、750、990、1200）
- 10. etao响应式实践小结 响应式设计 常见响应式模式及其实现 响应式项目协作流程 常用响应式技术polyfill 响应式之移动端 响应式之服务端 那些年，踩过的一些坑
- 11. 常见响应式模式及其实现 布局（layout） 导航(navgation) 图片(images) 多媒体(media) 表单(form) 模块/组件(modules) http://bradfrost.github.io/this-is-responsive/patterns.html https://github.com/miaojing/responsive
- 12. 响应式模式-布局
- 13. 响应式模式-布局 目前搜集有30多种布局响应方式 布局响应实现方式一致： 临界点的突变响应（media query） 临界点间的响应（百分比 弹性宽度） 弹性网格布局系统
- 16. 响应式模式-导航
- 17. 响应式模式-导航
- 20. 响应式模式-图片-img Responsive-images （服务端结合js种分辨率的cookie） Img Srcset Picture 问题：可能多一次图片请求
- 23. 响应式模式-多媒体 Video Html5 video Flash(js) @media (max-width: 480px) { .video-container video { width: 400px; } }
- 24. 响应式模式-表单 Basic form Search form
- 25. 响应式模式-模块 Switchable Accordion Overlay
- 28. 响应式模式-模块-overlay
- 29. etao响应式实践小结 响应式设计 常见响应式模式及其实现 响应式项目协作流程 常用响应式技术polyfill 响应式在移动端 响应式在服务端 那些年，踩过的一些坑
- 31. etao响应式实践小结 响应式设计 常见响应式模式及其实现 响应式项目协作流程 常用响应式技术polyfill 响应式在移动端 响应式在服务端 那些年，踩过的一些坑
- 32. 常用响应式技术polyfill Media query兼容实现 Picture兼容实现
- 34. Media query兼容实现 Respond.js Css3-mediaqueries-js Etao的解决方案
- 35. Respond.js 1k不到 支持跨域（跨cdn） 但至少有500ms闪屏 仅支持min-width和max-width 额外多304请求 https://github.com/scottjehl/Respond
- 36. Respond.js
- 37. Css3-mediaqueries-js 所有Mediaquery 完全兼容实现 和repond.js相比，性能较差（140ms vs 15ms） 不支持跨域
- 39. Media query兼容实现 1.类respond.js切换内联css 优点：自动化、使用方便 缺点：跨域配置麻烦、性能(请求css文件，解析mediaquery慢、js偏大) 2.切换css文件 <link rel=“stylesheet” media=“screen and (min-width:500px)” href=“example.css” /> 优点：文件分离，load时按需加载，js小 缺点：多文件管理麻烦，当media query不足1k时多一个请求 3.切换全局class 优点：方便管理 js小 缺点：load时所有css加载，但其实不多
- 40. Etao media query 兼容方案 全局切换class 引入less解决css重复维护问题 整合至kissy gallery guide https://github.com/miaojing/responsive
- 42. Picture兼容实现 Picture Picturefill 参考picturefill实现（可用性、只加载一次图片、图片懒加载） https://github.com/scottjehl/picturefill https://github.com/miaojing/responsive/blob/master/1.0/guide/pic turepolyfill.md
- 43. etao响应式实践小结 响应式设计 常见响应式模式及其实现 常用响应式技术polyfill 响应式在服务端 响应式在移动端 响应式协作流程 那些年，踩过的一些坑
- 44. 响应式在服务端 Image的响应 mobile和pc图片大小规则的响应 Css/js的响应 渐进增强/优雅降级（仅pc兼容IE/仅移动端触屏） Html的响应 不同设备不同数据的响应，如宝贝数量pc下80个，mobile下 20个；商品详情页pc下直接展示，mobile下出„查看详情‟按钮
- 45. Etao服务端UA判断通用库 含PHP和JAVA2个版本 业界成熟的方案: Detect Mobile Browsers WURFL Etao基于WURFL适当裁剪 demo
- 46. Etao服务端UA判断通用库 根据目前响应式实践项目中遇到的问题，暂定api如下： 1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等 2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以用到 3.判断是否是pc 数据内容的响应、判断图片响应可能要用到 4.判断是否移动端 数据内容的响应、切换兼容ie的css、js可以用到/ 加载触屏事件js支持
- 47. 5.根据UA推算出分辨率 可用于响应图片的在移动端的初始值 参 考en.wikipedia.org/wiki/List_of_displays_by_pixel_density 6.判断是否ios 7.判断是否安卓 8.判断用户的网络类型
- 48. etao响应式实践小结 响应式设计 常见响应式模式及其实现 响应式协作流程 常用响应式技术polyfill 响应式在服务端 响应式在移动端 那些年，踩过的一些坑
- 50. 响应式在移动端 移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇一摇) 移动端性能优化 按需加载css/js/html 类库的选择（首选kissy 体验不佳） 优化工具 https://developers.google.com/chrome-developer- tools/docs/profiles http://demo.etao.net/wangpu/qigege.html
- 51. etao响应式实践小结 响应式设计 常见响应式模式及其实现 响应式协作流程 常用响应式技术polyfill 响应式在移动端 响应式在服务端 那些年，踩过的一些坑
- 52. 那些年，踩过的一些坑 因淘宝rms发布系统，Media query的写法注意 Media query（webkit w3c）滚动条差异 Iphone下背景显示不全 Iphone5下主屏打开上下黑边框
- 53. Media query的写法注意 @media only scrren and (max-width : 768px ) {} @media only screen and /*!YUI-Compressor */ ( max-width: 768px){} （推荐） @media (max-width : 768px ) {} （推荐） yui compresser 2.4.3 升级到 2.4.7
- 54. media query width差异 Webkit内核 计算不包含滚动条 IE9 ff等包含滚动条 W3C标准不包含
- 58. 谢谢大家 感谢ux交互委员会 感谢etao首页项目组（妙净、墨峰、栖邀、李杰） 感谢响应式兴趣小组（ww: 958033829）（妙净、墨峰、雨 异、基德、李杰、子宽、岑安、乐淘、邓萌等） 目前的我们的响应式设计在移动端的体验有待提升，还要继续努力~