狠狠撸

etao响应式实践小结
妙净
etao首页项目组
响应式兴趣小组

? 响应式设计
? 常见响应式模式及其实现
? 响应式项目协作流程
? 常用响应式技术polyfill
? 响应式之服务端
? 响应式之移动端
? 那些年，踩过的一些坑

响应式设计
? 响应式设计的概念（多终端响应）
? 常用响应式设计的方法（PC优先、移动优先）
? Etao响应式实践

贰迟补辞响应式实现小结3

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）

? 响应式设计
? 响应式之移动端
? 响应式之服务端

常见响应式模式及其实现
? 布局（layout）
? 导航(navgation)
? 图片(images)
? 多媒体(media)
? 表单(form)
? 模块/组件(modules)
http://bradfrost.github.io/this-is-responsive/patterns.html
https://github.com/miaojing/responsive

响应式模式-布局
? 目前搜集有30多种布局响应方式
? 布局响应实现方式一致：
临界点的突变响应（media query）
临界点间的响应（百分比弹性宽度）
? 弹性网格布局系统

响应式模式-布局-弹性网格系统
Bootstrap
Responsive Grid System

响应式模式-布局-etao
http://xthsky.github.io/layout/
etao响应式布局工具

响应式模式-图片
? 背景图片（background-image）
? 前景图片(img)

响应式模式-图片-产补肠办驳谤辞耻苍诲-颈尘补驳别

响应式模式-图片-img
? Responsive-images （服务端结合js种分辨率的cookie）
? Img Srcset
? Picture
问题：可能多一次图片请求

响应式模式-图片-img srcset
http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
https://github.com/borismus/srcset-polyfill

响应式模式-图片-picture
https://github.com/scottjehl/picturefill
http://www.w3.org/TR/2013/WD-html-picture-element-20130226/

响应式模式-多媒体
? Video
Html5 video
Flash(js)
@media (max-width: 480px) {
.video-container video {
width: 400px;
}
}

响应式模式-表单
? Basic form
? Search form

响应式模式-模块
? Switchable
? Accordion
? Overlay

? Switchable

? Switchable (kissy的switchable支持响应式较麻烦)

响应式模式-模块-辞惫别谤濒补测

? 响应式设计
? 响应式在移动端
? 响应式在服务端

响应式协作流程
各种响应式项目后总结如下：

常用响应式技术polyfill
? Media query兼容实现
? 笔颈肠迟耻谤别兼容实现

Media query兼容实现
? Ie8及其以下不支持

? Respond.js
? Css3-mediaqueries-js
? Etao的解决方案

Respond.js
? 1k不到
? 支持跨域（跨cdn）但至少有500ms闪屏
? 仅支持min-width和max-width
? 额外多304请求
https://github.com/scottjehl/Respond

Css3-mediaqueries-js
? 所有Mediaquery 完全兼容实现
? 和repond.js相比，性能较差（140ms vs 15ms）
? 不支持跨域

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加载，但其实不多

Etao media query 兼容方案
? 全局切换class
? 引入less解决css重复维护问题
? 整合至kissy gallery guide
https://github.com/miaojing/responsive

Mediaquery兼容切换全局class
https://github.com/miaojing/responsive/blob/master/1.0/guide/medi
aquerypolyfill.md

笔颈肠迟耻谤别兼容实现
? Picture Picturefill
? 参考picturefill实现（可用性、只加载一次图片、图片懒加载）
https://github.com/scottjehl/picturefill
https://github.com/miaojing/responsive/blob/master/1.0/guide/pic
turepolyfill.md

? 响应式设计
? 响应式协作流程

响应式在服务端
? Image的响应
mobile和pc图片大小规则的响应
? Css/js的响应
渐进增强/优雅降级（仅pc兼容IE/仅移动端触屏）
? Html的响应
不同设备不同数据的响应，如宝贝数量pc下80个，mobile下
20个；商品详情页pc下直接展示，mobile下出?查看详情?按钮

Etao服务端UA判断通用库
? 含PHP和JAVA2个版本
? 业界成熟的方案: Detect Mobile Browsers WURFL
? Etao基于WURFL适当裁剪 demo

Etao服务端UA判断通用库
根据目前响应式实践项目中遇到的问题，暂定api如下：
? 1.判断是否是mobile端
数据内容的响应、切换mobile端特有的 meta viewport 等
? 2.判断是否是平板（ipad等）
数据内容的响应、切换平板端特有的 meta viewport 等都可以用到
? 3.判断是否是pc
数据内容的响应、判断图片响应可能要用到
? 4.判断是否移动端
数据内容的响应、切换兼容ie的css、js可以用到/ 加载触屏事件js支持

? 5.根据UA推算出分辨率可用于响应图片的在移动端的初始值参
考en.wikipedia.org/wiki/List_of_displays_by_pixel_density
? 6.判断是否ios
? 7.判断是否安卓
? 8.判断用户的网络类型

? 响应式设计

响应式在移动端
? 移动端的优势体验（44px原则/User-select/Touch事件
onorientationchange旋转/ondevicemotion摇一摇)

响应式在移动端
? 移动端的优势体验（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

? 响应式设计

那些年，踩过的一些坑
? 因淘宝rms发布系统，Media query的写法注意
? Media query（webkit w3c）滚动条差异
? Iphone下背景显示不全
? Iphone5下主屏打开上下黑边框

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

media query width差异
? Webkit内核计算不包含滚动条
? IE9 ff等包含滚动条
? W3C标准不包含

Iphone下背景显示
http://ux.etao.com/posts/687

Iphone下背景显示不全
? Viewport的设置方法
? 原因是viewport的设置影响根元素的宽度

Iphone5下主屏打开上下黑边框
? viewport的meta移除width=device-width
http://stackoverflow.com/questions/1265620
0/how-can-i-make-my-web-app-iphone-5-
compatible

谢谢大家?
? 感谢ux交互委员会
? 感谢etao首页项目组（妙净、墨峰、栖邀、李杰）
? 感谢响应式兴趣小组（ww: 958033829）（妙净、墨峰、雨
异、基德、李杰、子宽、岑安、乐淘、邓萌等）
目前的我们的响应式设计在移动端的体验有待提升，还要继续努力~

狠狠撸

贰迟补辞响应式实现小结3

More Related Content

贰迟补辞响应式实现小结3