一、课程大纲

1.     基础事件

touchstart

touchmove

touchend

2.     event对象

取消默认事件

阻止冒泡

防止文字选中和阻止默认菜单

鼠标事件延迟

事件点透问题

3.     touchEvent

touches

changedTouches

targetTouches

4.     滑屏处理

拖拽原理分析

滑屏幻灯片简版

5.     transform2D变换

rotate() scale() skew() translate()

left和top引起的回流问题及优化

处理transform中不能通过计算计算后样式获取的问题

6.     transition动画

transtion基本知识点

贝塞尔曲线运动

transitioned事件

transition不执行的bug

7.     实例 移动端版音悦台首页制作

rem布局适配

横竖屏切换适配

fixed定位的bug及替代方案

滑屏导航缓冲回弹动画的实现

完整版无缝滚动的滑屏幻灯片

滑屏选项卡

8.     transform3D

滑动旋转的方块

3d多边体制作

正n边形的外角计算与正n边形的中心点计算

9.     3d桌面切换

百分比适配怪异盒模型布局适配

animation的loading动画

立体三棱柱制作

页面绝对坐标获取

ios下3d变换 的兼容问题及解决方案

10.    

二、基础知识

1.     像素

iphone5 640*1136像素 物理像素

px 逻辑像素 浏览器使用的抽象单位 640*1136的div不能在iphone5上铺满

dp,pt设备无关像素

dpr设备像素缩放比

1px=(dpr)^2*dp 平面上

1px=dp*dp 纬度

2.     viewport

* ios的viewport=980

手机浏览器默认为我们做了2件事

        页面渲染在一个980px(ios)的viewport 缩放

窗口缩放sacle

 

3.     meta标签

设置viewport

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

minimum-scale

maximum-scale

user-scalable用户能否缩放

4.     设计移动web

方案1 根据设备的实际宽度来设计(常用)

方案2 1px=1dp 缩放0.5

1px边框和高清图片都不需要额外处理

这2种都不好

5.     弹性盒子布局

flex：1； 1/n

混合划分：

水平垂直居中：

常见布局

兼容性：

        ios可以使用最新的flex布局

        android4.4及以上可以使用最新的flex布局

        android4.4以下使用旧flex

6.     响应式设计

媒体查询是核心

百分比

弹性图片 即图片大小为百分比

重新布局，显示与隐藏 绝对定位(经常切换位置的元素)

7.     特别样式处理

图片大小用dp

1px边框

rem根据html的font-size为相对单位，rem=screen.width/20，font-size不应该使用rem而使用px

8.     交互事件 touch

移动web上的click事件响应都要慢300ms

使用Tap(自定义)事件代替click事件

Tap事件的点透bug:点击蒙层，下面元素的click会触发

9.     touch事件

touch android bug

弹性滚动：

上拉加载：scroll事件 而不是touch事件

10.    

三、