一、课程大纲
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.
三、
