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

Tablet View of COOKPAD Website

Keisuke Tada
November 29, 2012
220

Tablet View of COOKPAD Website

Keisuke Tada

November 29, 2012
Tweet

Transcript

  1.    ੾Γସ͑ͷྲྀΕ ɾ$44Ͱ͸.FEJB2VFSJFTΛ༻͍ͯ ɹ୺຤ͷαΠζ ݱࡏͷ޲͖ͷ෯ ʹΑͬͯ ɹద༻͢ΔελΠϧΛม͑Δ $break_point =

    800px; // スタイルを切り替える幅 @media screen and (max-width: $break_point) { ... // 端末幅が $break_point 以下の場合 } @media screen and (min-width: $break_point+1) { ... // 端末幅が $break_point 以上の場合 }
  2.    5JQTεέʔϧௐ੔ # CoffeeScript scale = ... # 拡大率を計算

    originX = ... # どこを起点に拡大するか計算 $(‘$main’).css( ‘-webkit-transform’: “scale(#{scale})” ‘-webkit-transform-origin’: “#{originX} 0” ‘visibility’: ‘visible’ )
  3. # CoffeeScript scale = ... # 拡大率を計算 originX = ...

    # どこを起点に拡大するか計算 $(‘$main’).css( ‘-webkit-transform’: “scale(#{scale})” ‘-webkit-transform-origin’: “#{originX} 0” ‘visibility’: ‘visible’ )    5JQTεέʔϧௐ੔ ֦େޙʹදࣔ ݩͷ$44Ͱ͸hidden