移动端

适配方案

 网页宽度必须和浏览器保持一致 
 默认显示的缩放比例和PC端报错（缩放比例1.0） 
 不允许用户自行缩放页面 

适配设置

 如果任何设置都没有，默认走的就是viewport的默认设置 
 去设置新的viewport设置，达到适配要求 
 <meta name="viewport" /> 设置视口的标签 在head里面并且应该紧接着编码设置 

viewport的功能：

content中使用：

可以设置宽度 width:device-width 当前设备宽度
可以设置高度 height
可视设置默认的缩放比例 initial-scale
可以设置是否允许用户自行缩放 user-scalable （yes、no 1、0）
可以设置最大缩放比例 maximum-scale
可以设置最小缩放比例 minimum-scale

移动端触摸事件 touch

touchstart 当手指触摸屏幕的时候就触发
touchmove 当手指在屏幕中来回滑动的时候触发
touchend 当手指离开屏幕的时候触发
touchcancel 当被迫终止滑动的时候触发（如弹出消息、来电）

添加事件

element.addEventListener(“touchstart”, function(){},false);

事件对象

TouchList 触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合
changedTouches 改变后的触摸点集合 每个事件都会记录
targetTouches 当前元素的触发点集合 在离开屏幕的时候无法记录触摸点
touches 页面上所有的触发点集合 在离开屏幕的时候无法记录触摸点

滑动实现的原理

1.就是让触摸的元素随着手指的滑动做位置的改变
2.位置的改变，需要当前手指的坐标
3.在每一个触摸点中会记录当前触摸点的坐标 e.touches[0]第一个触摸点
触摸点坐标
clientX clientY 基于浏览器窗口（基于视口）
pageX pageY 基于页面（视口）
screenX screenY 基于屏幕（包括浏览工具栏等）

轻触事件 tap

tap事件 轻触 响应快速
移动端也有click事件 但是移动端为了区分滑动还是点击，会在延迟后触发，看看你有没有滑动 （300ms）

响应式

css3中的Media Query (媒体查询)
通过查询screen的宽度
超小屏幕 768px以下
小屏设备 768px-922px
中等屏幕 922px-1200px
宽屏设备 1200px以上

@media screen and (min-width: 1200px) {}
@media screen and (min-width: 992px) and (max-width: 1200px) {}
@media screen and (min-width: 768px) and (max-width: 992px) {}
@media screen and (max-width: 768px) {}

下面我自己封装了一个侧边栏的划动

// 移动端侧边栏滑动
// 这里我设置了两个参数 ：一个是需要划动的元素、 一个是划动元素的父元素
// 通过设置子元素在父元素中的 position:absolute top定位来实现划动
function mainNavMove(ele,farele) {
	// 父元素
    var farele = document.getElementsByClassName(farele)[0];
    // 父元素高度 为了在后面求出 父元素和子元素的高度差 来设置最大划动距离
    var fareleHeight = farele.offsetHeight;
	// 子元素
    var ele = document.getElementsByClassName(ele)[0];
   	// 子元素高度
    var eleHeight = ele.offsetHeight;
    // 父元素和子元素的高度差
    var disH = eleHeight - fareleHeight;
	
	// startY 获取初始手指坐标  disY划动距离  top是用来记录每次移动之后的top定位值，在下次划动的时候会在top值的基础上进行定位
    var startY = 0,
        disY = 0,
        top = 0;
    ele.style.top = 0;
    ele.addEventListener('touchstart', function (e) {
    	// 获取起始坐标
        startY = e.touches[0].clientY;
    }, false);
    ele.addEventListener('touchmove', function (e) {
    	// 移动过程中的坐标
        var moveY = e.touches[0].clientY;
        // 划动定位
        disY = top + (moveY - startY);
        ele.style.top = disY + 'px';
    }, false);
    ele.addEventListener('touchend', function (e) {
    	// 重置参数
        disY = 0;
        startY = 0;
        // 记录top值
        top = parseInt(ele.style.top);
        // 当top值大于0时，子元素上方出现空白，小于disH（子元素与父元素高度差），下方出现空白
        if (top > 0) {
            top = 0;
            ele.style.top = 0;
        } else if (top < -disH) {
            top = -disH;
            ele.style.top = -disH + 'px';
        }
    }, false);
}