跨终端产品实践 - Speaker Deck

Slide 1

Slide 1 text

跨终端产品实践我的淘宝实践总结灵玉 - F2E@Taobao 2013/10/19 13年12月1⽇日星期⽇日

Slide 2

Slide 2 text

•确定实施方案 •响应式技术实践 •pad兼容与优化 •我的淘宝NEXT 13年12月1⽇日星期⽇日

Slide 3

Slide 3 text

•确定实施方案 • 响应式技术实践 • pad兼容与优化 • 我的淘宝NEXT 13年12月1⽇日星期⽇日

Slide 4

Slide 4 text

Tablets Desktops phones NEXT 响应式适配定制化 FIRST 设备支持 PC to Mobile 13年12月1⽇日星期⽇日

Slide 5

Slide 5 text

• IE6 • IE7/IE8 • IE9+/Chrome/Sofari/Firefox 浏览器支持 w1024 w1190 Fluid-width Javascript media query 13年12月1⽇日星期⽇日

Slide 6

Slide 6 text

• 确定实施方案 •响应式技术实践 • pad兼容与优化 • 我的淘宝NEXT 13年12月1⽇日星期⽇日

Slide 7

Slide 7 text

Fluid Grid System 流体栅格 13年12月1⽇日星期⽇日

Slide 8

Slide 8 text

（ 4% + 1% ） x 20 = 100% width = 1190px 13年12月1⽇日星期⽇日

Slide 9

Slide 9 text

（ 4% + 1% ） x 20 = 100% width = 760px 13年12月1⽇日星期⽇日

Slide 10

Slide 10 text

视觉规范遵循流体栅格 13年12月1⽇日星期⽇日

Slide 11

Slide 11 text

.mt-userinfo { @include column(21); } .mt-app { width: grid-width(6) + grid-margin(6); } /* .mt-userinfo { width: 4% x 21; margin: 0 0.5%; display: inline; oat: left; } */ /* .mt-app { width: 4% x 6 + 1% x 6; } */ 13年12月1⽇日星期⽇日

Slide 12

Slide 12 text

http://chesihui.github.io/mt/ 13年12月1⽇日星期⽇日

Slide 13

Slide 13 text

宽屏窄屏 ipad横版 ipad竖版 13年12月1⽇日星期⽇日

Slide 14

Slide 14 text

Responsive Images 响应式图片 13年12月1⽇日星期⽇日

Slide 15

Slide 15 text

水平垂直剧中 + 等比缩放 13年12月1⽇日星期⽇日

Slide 16

Slide 16 text

.img-ratio-wide { padding-bottom: 100%; } img { position: absolute; left:0; top:0; bottom: 0; right:0; max-width: 100%; }

To IE7 13年12月1⽇日星期⽇日

Slide 17

Slide 17 text

img { position: absolute; left:0; top:0; bottom: 0; right:0; max-width: 100%; }

.img-ratio-wide { padding-bottom: 100%; } width : height = 1 : 1 13年12月1⽇日星期⽇日

Slide 18

Slide 18 text

圆形图片 + 等比缩放 13年12月1⽇日星期⽇日

Slide 19

Slide 19 text

img { border-radius: 50% ; }

保证正圆 13年12月1⽇日星期⽇日

Slide 20

Slide 20 text

保证清晰 + 等比缩小 13年12月1⽇日星期⽇日

Slide 21

Slide 21 text

原尺⼨寸：(3x3)px 重新绘制: (2x2)px 13年12月1⽇日星期⽇日

Slide 22

Slide 22 text

300x300px 299x299px 避免尺寸微调导致模糊 13年12月1⽇日星期⽇日

Slide 23

Slide 23 text

background-image: url('image.png'); background-image: -webkit-image-set(url('image.png') 1x, url('image-larger.png') 2x); Retina + 背景图片 13年12月1⽇日星期⽇日

Slide 24

Slide 24 text

Retina + 图片元素 http://responsiveimages.org 13年12月1⽇日星期⽇日

Slide 25

Slide 25 text

Lazy-load images 13年12月1⽇日星期⽇日

Slide 26

Slide 26 text

Icons - Font @font-face { font-family: 'mticonfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } 13年12月1⽇日星期⽇日

Slide 27

Slide 27 text

• 确定实施方案 •pad兼容与优化 • 响应式技术实践 • 我的淘宝NEXT 13年12月1⽇日星期⽇日

Slide 28

Slide 28 text

善用特性 + 交互体验 13年12月1⽇日星期⽇日

Slide 29

Slide 29 text

css 3D css 2D JS Animation 动画选用 + 更加流畅 translateXY/left/top left/top/margin translateXYZ faster 13年12月1⽇日星期⽇日

Slide 30

Slide 30 text

css3 Animation JS Animation 动画选用 + 更加流畅 height/width faster height/width 13年12月1⽇日星期⽇日

Slide 31

Slide 31 text

css3 Animation css3 Animation 动画选用 + 更加流畅 left / top / margin faster translateXY 13年12月1⽇日星期⽇日

Slide 32

Slide 32 text

Math.round() -webkit-transform: translate3d(246.7px, 0px, 0px) 动画选用 + 更加流畅 -webkit-transform: translate3d(247px, 0px, 0px) 13年12月1⽇日星期⽇日

Slide 33

Slide 33 text

css3 rem + 字体设置 html { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } h1 { font-size: 1.4rem; /*1.4 × 10px = 14px */ } h2 { font-size: 2.4rem; /*2.4 × 10px = 24px*/ } 13年12月1⽇日星期⽇日

Slide 34

Slide 34 text

Touch Mouse + 事件顺序 touchstart touchend 等待375ms mousemove mousedown mouseup click touchmove scroll ... 13年12月1⽇日星期⽇日

Slide 35

Slide 35 text

•我的淘宝NEXT • 响应式技术实践 • pad兼容与优化 • 确定实施方案 13年12月1⽇日星期⽇日

Slide 36

Slide 36 text

• 数据与模板分离 • 框架定制化、模块颗粒公用化 • 响应式技术应用 • 足够轻量 • 性能强优化 13年12月1⽇日星期⽇日

Slide 37

Slide 37 text

THX 13年12月1⽇日星期⽇日