响应式开发

根据设备的宽度，自动调整页面到大小，从而在各个设备上呈现出最佳的视觉效果。

响应式开发的种类：1.适合小型的项目或需求页：PC端和移动端公用一套 2.大型的项目如淘宝 PC端（固定布局）和移动端（移动适配）各用一套

响应式所用的技术：1.视口viewport 2.媒体查询（可以识别设备的特征，从而调整页面的布局） 3.布局时用相对单位，rem 100% em 4.图片的处理（max-width/min-width）5.flex布局

1.视口vieport: 'meta:vp + tab'; PC端页面和移动端页面最大的差别：设备的宽度不一样默认移动端页面时按照980宽度渲染，还是比移动设备宽度大，为了防止滚动条的出现，早期各个设备做缩放处理，缩放比例=设备宽度/980，这样处理，文字图片看不清。

所以需要更改渲染的宽度（布局视口的宽度），改成设备的宽度渲染，这样页面也不会缩放

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width = device - width;布局视口 = 设备宽度
user-scalable = no;是否允许缩放页面 no禁止
initial-scale=1.0;初始缩放值
maximum-scale=1.0;最大缩放的比例
minimum-scale=1.0;最小缩放的比例
2.媒体查询
根据媒体条件设置不同的样式，从而显示不同的效果
@media all|screen|print and(媒体条件){
   div{
       css样式
   }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            background: palegreen;
        }
/*        @media all and (max-375px){ !*小于等于375执行 and后必须加空格*!
            #div1{
                background: red;
            }
        }
        @media all and (min- 376px) and (max- 414px){
            #div1{
                background: paleturquoise;
            }
        }
        @media all and (min-415px){!*大于等于415*!
            #div1{
                background: pink;
            }
        }*/
        @media all and (orientation: landscape){  /*横向*/
            #div1{
                background: blue;
            }
        }
        @media all and (orientation: portrait){   /*纵向*/
            #div1{
                background: purple;
            }
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

大型的项目 PC端一套（固定布局），移动端一套（移动适配）

1.dpr 设备像素比（决定屏幕的清晰度）1.0普通屏幕 2.0高清屏幕 >2.0 3.0超高清屏幕（dpr = 物理像素/css像素）

iphone3 dpr：1.0 375*667

iphone6 物理像素：750*1334(屏幕里的像素点数=宽高*dpr) css像素：375*667(px) dpr=2 设计稿是750

iphone6p 1242*2208 414*736 dpr=3 设计稿 1242

移动适配：根据设计稿，在各个移动设备上呈现的效果是一样的（布局是一样的），但是由于设备的宽度各不一样，图片的尺寸，内容的间距，文字的大小会发生相应的改变。

图片的大小得根据设备的宽度进行缩放，不能用固定单位px,而是用相对单位rem

rem是相对于根元素（html）字体大小　　

得各个设备元素尺寸不同，只需更改根元素字体大小，根元素尺寸发生改变，元素的尺寸就会改变

根据媒体查询更改跟元素字体大小会有如下问题：1.设置的是设备宽度的范围，不精准 2.根元素字体大小的设置多少合适，不太好设置

应该根据各个设备宽度从而设置各个设备的根元素字体大小

元素的尺寸设置多少rem合适

假设设备宽度为750px，设计稿宽度是也是750，如何设置元素的尺寸

设备宽度根元素字体大小元素尺寸

750 100 3.36rem*2.1rem 336px*210px

375 3.36rem*2.1rem 165px*105px

设备宽度/根元素字体大小 = 设计稿宽度750/100

    //处理dpr为2的设备   设计稿宽度750/100 = 设计宽度/根元素字体大小
    ~(function (desW) {
        let clientW = document.documentElement.clientWidth;
//        desW/100 = clientW/x
        document.documentElement.style.fontSize = clientW/desW * 100 + 'px';
    })(750);

移动端little Demo:（盒子随鼠标移动）

    let oDiv = document.getElementById('div1');
    let startX = 0,
        startY = 0;
    oDiv.addEventListener('touchstart',function (e) {
        this.downX = e.touches[0].clientX;
        this.downY = e.touches[0].clientY;
    },false);
    oDiv.addEventListener('touchmove',function (e) {
        let moveX = e.touches[0].clientX;
        let moveY = e.touches[0].clientY;
        this.posX = moveX - this.downX;//横向移动的距离
        this.posY = moveY - this.downY;
//        console.log(moveX - this.downX, moveY - this.downY);
        this.style.webkitTransform = 'translate('+(startX + this.posX)+'px,'+(startY + this.posY)+'px)';
    },false);
    oDiv.addEventListener('touchend',function (e) {
        startX += this.posX;
        startY += this.posY;
    },false)

zepto 封装的touch events

tap —元素tap的时候触发。
singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)。
longTap — 当一个元素被按住超过750ms触发。
swipe(划过), swipeLeft（左滑）, swipeRight（右滑）, swipeUp（上滑）, swipeDown（下滑） — 当元素被划过时触发。(可选择给定的方向)