根据设备的宽度，自动调整页面到大小，从而在各个设备上呈现出最佳的视觉效果。
响应式开发的种类：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的时候触发。singleTapanddoubleTap— 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用tap代替)。longTap— 当一个元素被按住超过750ms触发。swipe(划过),swipeLeft（左滑）,swipeRight（右滑）,swipeUp（上滑）,swipeDown（下滑）— 当元素被划过时触发。(可选择给定的方向)