跨终端产品实践

我的淘宝实践总结

Transcript

1. 跨终端产品实践 我的淘宝实践总结 灵玉 - F2E@Taobao 2013/10/19 13年12月1⽇日星期⽇日
2. •确定实施方案 •响应式技术实践 •pad兼容与优化 •我的淘宝NEXT 13年12月1⽇日星期⽇日
3. •确定实施方案 • 响应式技术实践 • pad兼容与优化 • 我的淘宝NEXT 13年12月1⽇日星期⽇日
4. Tablets Desktops phones NEXT 响应式适配 定制化 FIRST 设备支持 PC to Mobile 13年12月1⽇日星期⽇日
5. • IE6 • IE7/IE8 • IE9+/Chrome/Sofari/Firefox 浏览器支持 w1024 w1190 Fluid-width Javascript media query 13年12月1⽇日星期⽇日
6. • 确定实施方案 •响应式技术实践 • pad兼容与优化 • 我的淘宝NEXT 13年12月1⽇日星期⽇日
7. Fluid Grid System 流体栅格 13年12月1⽇日星期⽇日
8. （ 4% + 1% ） x 20 = 100% width = 1190px 13年12月1⽇日星期⽇日
9. （ 4% + 1% ） x 20 = 100% width = 760px 13年12月1⽇日星期⽇日
10. 视觉规范 遵循流体栅格 13年12月1⽇日星期⽇日
11. .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⽇日星期⽇日
12. http://chesihui.github.io/mt/ 13年12月1⽇日星期⽇日
13. 宽屏 窄屏 ipad横版 ipad竖版 13年12月1⽇日星期⽇日
14. Responsive Images 响应式图片 13年12月1⽇日星期⽇日
15. 水平垂直剧中 + 等比缩放 13年12月1⽇日星期⽇日
16. .img-ratio-wide { padding-bottom: 100%; } img { position: absolute; left:0; top:0; bottom: 0; right:0; max-width: 100%; } <div class="item"> <span class="img-ratio-wide"> <span class="ie7-vertical-center" > <a><img src= ""/></a> </span> </span> </div> To IE7 13年12月1⽇日星期⽇日
17. img { position: absolute; left:0; top:0; bottom: 0; right:0; max-width: 100%; } <div class="item"> <span class="img-ratio-wide"> <span class="ie7-vertical-center" > <a><img src= ""/></a> </span> </span> </div> .img-ratio-wide { padding-bottom: 100%; } width : height = 1 : 1 13年12月1⽇日星期⽇日
18. 圆形图片 + 等比缩放 13年12月1⽇日星期⽇日
19. img { border-radius: 50% ; } <img src= " http://img01.taobaocdn.com/T2bNGSXi0aXXXXXXXX_!! 754787757.jpg_120x120xz.jpg" /> 保证正圆 13年12月1⽇日星期⽇日
20. 保证清晰 + 等比缩小 13年12月1⽇日星期⽇日
21. 原尺⼨寸：(3x3)px 重新绘制: (2x2)px 13年12月1⽇日星期⽇日
22. 300x300px 299x299px 避免尺寸微调导致模糊 13年12月1⽇日星期⽇日
23. background-image: url('image.png'); background-image: -webkit-image-set(url('image.png') 1x, url('image-larger.png') 2x); Retina + 背景图片 13年12月1⽇日星期⽇日
24. <img src = 'image.png' srcset = 'image-s.png 1x, image-b.png 2x' /> Retina + 图片元素 http://responsiveimages.org 13年12月1⽇日星期⽇日
25. Lazy-load images <img class="lazy-load" srcset="image-1x.jpg 1x, image-2x.jpg 2x" /> 13年12月1⽇日星期⽇日
26. 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⽇日星期⽇日
27. • 确定实施方案 •pad兼容与优化 • 响应式技术实践 • 我的淘宝NEXT 13年12月1⽇日星期⽇日
28. 善用特性 + 交互体验 13年12月1⽇日星期⽇日
29. css 3D css 2D JS Animation 动画选用 + 更加流畅 translateXY/left/top left/top/margin translateXYZ faster 13年12月1⽇日星期⽇日
30. css3 Animation JS Animation 动画选用 + 更加流畅 height/width faster height/width 13年12月1⽇日星期⽇日
31. css3 Animation css3 Animation 动画选用 + 更加流畅 left / top / margin faster translateXY 13年12月1⽇日星期⽇日
32. Math.round() -webkit-transform: translate3d(246.7px, 0px, 0px) 动画选用 + 更加流畅 -webkit-transform: translate3d(247px, 0px, 0px) 13年12月1⽇日星期⽇日
33. 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⽇日星期⽇日
34. Touch Mouse + 事件顺序 touchstart touchend 等待375ms mousemove mousedown mouseup click touchmove scroll ... 13年12月1⽇日星期⽇日
35. •我的淘宝NEXT • 响应式技术实践 • pad兼容与优化 • 确定实施方案 13年12月1⽇日星期⽇日
36. • 数据与模板分离 • 框架定制化、模块颗粒公用化 • 响应式技术应用 • 足够轻量 • 性能强优化 13年12月1⽇日星期⽇日
37. THX 13年12月1⽇日星期⽇日