-------------移动端事件 touch事件----------------
touchstart--触摸开始触发，touchmove--触摸移动触发 、touchend--触摸结束触发
------------touch事件的event对象-----------------
1.属性： changedTouches 常用
touches--捕获所有的触摸点
targetTouches--捕获目标元素上的触摸点
----------changedTouches-------捕获发生变化的触摸点；常用
一般都是一根手指，所以获取第一个的数据，e.changedTouches[0]
当touchend触摸离开事件时，手指离开了屏幕，touches，targetTouches无法捕捉到触摸点，只有changedTouches能捕捉到；
2.changedTouches 获取坐标的属性 pageX pageY常用
clientX clientY-----是相对可视区的距离
pageX pageY------是相对页面起点的距离，更精准常用
------------单指拖拽--运动--------------
transform ：translate3d(x,y,z)--位移，z轴一般为0，比单独使用translateX/Y更高效（因为开启了GPU加速）
通过不断给X，Y 赋值，来实现点击位移；
-------------其他触摸事件--高级事件-----------------
touch事件支持原生格式，其他高级事件需要通过touch事件封装才行，比如touchstart按下超过XX毫秒，还没有触发touchend结束事件，就认定为这个是长按事件；；；最推荐的是，可以通过引入hammer.js来自己使用高级事件（人家封装好的）
1、拖动
Pan事件：（可以理解为对touch的封装）一个手指按下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理：
Panstart：拖动开始、Panmove：拖动过程、Panend：拖动结束、Pancancel：拖动取消、Panleft：向左拖动、Panright：向右拖动、Panup：向上拖动、Pandown：向下拖动
2、双指缩放
Pinch事件：在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件。该事件事以分别对以下事件进行监听并处理：
Pinchstart：多点触控开始、Pinchmove：多点触控过程、Pinchend：多点触控结束、Pinchcancel：多点触控取消、Pinchin：多点触控时两手指距离越来越近、Pinchout：多点触控时两手指距离越来越远
3、按压
Press事件：按压事件， 点击后最小按压时间为500毫秒，并不包含任何移动，常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理：
Pressup：点击事件离开时触发
4、双指旋转
Rotate事件：在指定的dom区域内，当两个手指或更多手指成圆型旋转时触发（就像两个手指拧螺丝一样）。该事件分别对以下事件进行监听并处理：
Rotatestart：旋转开始、Rotatemove：旋转过程、Rotateend：旋转结束、Rotatecancel：旋转取消
5、滑动
Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。
Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动
6、轻点击
Tap事件：在指定的dom区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。
------------兼容性查询网站can i use.com----------
输入要查询的标签，可以查询浏览器兼容性
H5浏览器兼容性
主要是header、footer标签兼容性解决：引入html5shiv.min.js来兼容，下载地址如图：<script src="html5shiv.min.js"></script>JS浏览器兼容性使用特性检测【如图使用短路运算符判断是否存在，最标准的写法要写在最前面】--- 处理浏览器兼容性
js-浏览器兼容性
使用特性检测【如图使用短路运算符判断是否存在，最标准的写法要写在最前面】--- 处理浏览器兼容性
CSS浏览器兼容性
以弹性布局为例，插入下载的js文件，按需选择，然后分别给支持和不支持的浏览器设置样式
（需要在modernizr官网选择flex，下载文件引入后， 才会有flexbox和no-flexbox这两个类名）
--------------------移动端动画-------------------
优先使用顺序
css3(transition>annimation)>js（requestAnimationFrame）；
移动端js动画--requestAnimationFrame调用一次只执行一帧，做完递归后再请求下一帧--直到抵达目的地
---------------click300ms延迟--------------
click300ms延迟--双击造成
1、部分浏览器加上width=device-width就能解决
2、
1）引入fastclick.js---下载地址如图：
原理：使用模拟的事件取代click300ms延迟
2）在script标签中写
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
----------------------水平居中垂直居中---------------------
一般使用弹性布局都可以解决，优先使用，不过也需要掌握更多的方法，面试有可能会问
（1） 行内元素
文字居中的方法：行内元素不能设置宽高，由内容撑开，本身就是垂直居中的，然后直接设置左右内边距撑开，就达到了水平居中效果；
容器居中的方法：加绝对定位，left和top设置50%，但因为是从容器左上角计算，所以实际还需要减去容器的一半宽高，但是行内元素是由内容撑开的，不知道宽高是多少，此时可以使用transform2d移动translate(-50%,-50%)，可以自动计算出容器的宽高（即使有指定宽高也可以使用这个方法自动计算）
（2）行内块元素
文字居中的方法：1、没有设置宽高：直接设置内边距撑开即可（块元素可以设置上边距，行内元素不行）
2、设置了宽高： 直接text-align：center 和 line-height，如果有多行文字就需要使用弹性布局了
容器居中的方法：1、没有设置宽高：与行内元素的方法一样，绝对定位，然后利用2d移动自动计算容器宽高移动到对应位置
2、设置了宽高 ：绝对定位各50%，然后margin对应方向 负宽度和高度的一半
（3）块级元素
文字居中的方法：因为块级元素默认是占宽度的100%，所以直接设置text-align：center就可以实现水平居中；垂直居中则设置上下内边距撑开；
容器居中的方法：1、没有设置宽高：同样使用绝对定位，2d移动到对应位置即可
2、设置了宽高 ：水平居中可以用margin：0 auto；水平垂直居中同样绝对定位，然后margin负掉宽高的一半
