Upgrade to Pro — share decks privately, control downloads, hide ads and more …

跨终端产品实践

d2forum
December 02, 2013
1.9k

 跨终端产品实践

我的淘宝实践总结

d2forum

December 02, 2013
Tweet

Transcript

  1. ( 4% + 1% ) x 20 = 100% width

    = 1190px 13年12月1⽇日星期⽇日
  2. ( 4% + 1% ) x 20 = 100% width

    = 760px 13年12月1⽇日星期⽇日
  3. .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⽇日星期⽇日
  4. .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⽇日星期⽇日
  5. 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⽇日星期⽇日
  6. img { border-radius: 50% ; } <img src= " http://img01.taobaocdn.com/T2bNGSXi0aXXXXXXXX_!!

    754787757.jpg_120x120xz.jpg" /> 保证正圆 13年12月1⽇日星期⽇日
  7. <img src = 'image.png' srcset = 'image-s.png 1x, image-b.png 2x'

    /> Retina + 图片元素 http://responsiveimages.org 13年12月1⽇日星期⽇日
  8. 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⽇日星期⽇日
  9. css 3D css 2D JS Animation 动画选用 + 更加流畅 translateXY/left/top

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

    / margin faster translateXY 13年12月1⽇日星期⽇日
  11. 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⽇日星期⽇日
  12. Touch Mouse + 事件顺序 touchstart touchend 等待375ms mousemove mousedown mouseup

    click touchmove scroll ... 13年12月1⽇日星期⽇日