移动端JDM项目知识点总结
主流适配方案（viewpoint）
1，流式布局：
就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局
2，视觉窗口：
viewport（视口），移动端特有，是一个承载网页的虚拟区域。
承载关系：浏览器---->viewport---->网页（浏览器承载视口，视口承载网页）
3，要实现移动设备与网页的匹配，主流适配方案
适配要求：
网页宽度必须和浏览器宽度保持一致（不会出现横向滚动条）默认显示的缩放比例和PC端保持（缩放比例1.0）不允许用户自行缩放网页
满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。
适配设置： 如果任何设置都没有，默认走的就是viewport的默认设置：
网页宽度为设置的宽度；会将网页(及内容)进行缩放到宽度与浏览器宽度一致；允许用户自行缩放网页。
需要去设置新的viewport设置,达到适配要求。
<meta name="viewport"> 设置视口的标签: 在head里面并且应该紧接着编码设置
<meta name="viewport" content="width=device-width, inicial-scale=1.0, user-scalable=0">
viewport的功能： 1. width 可以设置宽度 (device-width 当前设备的宽度) 2. height 可以设置高度 3. initial-scale 可以设置默认的缩放比例 4. user-scalable 可以设置是否允许用户自行缩放 5. maximum-scale 可以设置最大缩放比例 6. minimum-scale 可以设置最小缩放比例 在 content="" 使用以上参数 7. width=device-width 宽度一致比例是1.0 8. initial-scale=1.0 宽度一致比例是1.0 9. user-scalable=no 不允许用户自行缩放 （yes，no 1,0）
标准适配方案：(meta:vp + tab 快捷方式)
<meta name="viewport" content="width=device-width, inicial-scale=1.0, user-scalable=0">
4，非主流的适配方案
非主流适配方案解决的问题： 高清显示屏当中，显示同等质量的图片的时候会有失真（模糊效果）。 有的高分辨率的设备的在1px的区域中会有多个物理像素点(显示色块的最小单位)，如果一个长度为1px的大小为10kb的图像要显示在(1px的区域中有2个物理像素点的)设备上，那么一个物理像素点显示的就是5kb大小的内容，这样会造成图片的模糊。1px的区域中有n个物理像素点，就称像素比为n。现在大多数的移动端屏幕的像素比为2或3。所以在设计网页初稿时，一般会将网页的宽度设计为主流屏幕宽度的两倍或三倍，然后在网页显示时设置viewport的缩放比(initial-scale)为0.5或者0.333333，用来解决模糊问题。或者initial-scale设为1，但在设计所需图片(图片、精灵图)时设计成2倍图，在使用时再将图片缩小一半。物理像素是设备显示屏的最小可视颗粒的大小，现在有 高清显示屏 视网膜屏 retina屏，显示的效果就提高了更细腻，但是在显示同等质量的图片的时候（模糊效果）。在屏幕像素比（一个px宽的屏幕能放几个物理像素）高的设备，图片（非矢量）显示会模糊。提高网页的清晰度：根据屏幕的像素比来缩放网页，但是这样的适配方案成本非常高，一般的企业开发当中使用的还是标准化设置。
5，不建议在移动端使用jQuery（可以使用jquery,但是不建议）
jQuery 主要用于解决PC端浏览器的兼容问题(特别是IE)，但是移动端没有IE浏览器。移动端的主流浏览器：谷歌 火狐（2016年停止了维护和更新） safari浏览器 百度 360 qq …，其特点：浏览器内核基本上都是 webkit 或者 blink，如要做兼容就都加 -webkit- 前缀。建议在移动端使用H5的api，或者说使用一个 叫做： zepto.js 的库。（zepto.js 是基于高版本浏览器开发的）
6，在移动端由于使用流式布局，所以设置 box-sizing: border-box; 给定的盒子的宽度从盒子的边框开始计算。
在这个情况下，如果设置一个子容器的宽度为 width:100%; 又给它设置了margin: 0 15px; 那么该容器的实际大小就是父容器的宽度再加上30px，所以会出现30px的溢出。即：
设置了 width:100%; 的盒子，不能再设置左右外边距。
如果父容器设置了 width:100%; 且设置了padding: 0 15px，子容器的宽度设置为 width:100%; 那么子容器的实际宽度就是父容器的宽度减去30px。即：
百分比的计算：基于父容器的内容的宽度进行计算
7，移动端的重置样式：
*,
*::before,
*::after{
/*所有的标签，和伪元素都选中*/
margin: 0;
padding: 0;
/*移动端常用布局是非固定像素*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮效果的清除*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
input,textarea{
border: none;
outline: none;
/*不允许改变尺寸*/
resize: none;
/*清除浏览器的默认样式外观，none没有任何样式，这个属性必须加前缀*/
-webkit-appearance: none;
}
8，精灵图公用样式
使用精灵图时可以使用公用样式，然后在各自的样式中只需设置background-position属性。
[class^="icon_"],[class*=" icon_"]{
background-repeat: no-repeat;
background-image: url("../images/sprites.png");
background-size: 200px 200px;
}
9，使用组合样式进行类似排版区域的布局。
例如： 有两个模块的内容都是三张图片，只是每个模块的边框位置即图片的浮动方向有所区别，那么就只需要使用 不同浮动方向的类样式与不同边框位置的类样式相互组合进行布局。
10，触摸事件
解释touch: 1. touch是移动端的触摸事件 而且是一组事件 2. touchstart 当手指触摸屏幕的时候触发 3. touchmove 当手指在屏幕来回的滑动时候触发 4. touchend 当手指离开屏幕的时候触发 5. touchcancel 当被迫终止滑动的时候触发（来电，弹消息） 6. 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件
使用touch: 1. 绑定事件： box.addEventListener('touchstart',function () { },false); 2. 事件对象： 名字：TouchList------触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合 changedTouches 改变后的触摸点集合 targetTouches 当前元素的触发点集合 touches 页面上所有触发点集合 3. 各个触摸点集合在每个事件触发的时候是否会被记录？ - changedTouches 集合每个事件都会记录； - targetTouches集合，touches集合 在手指离开屏幕的时候无法记录。
分析滑动实现的原理： 1. 就是让触摸的元素随着手指的滑动做位置的改变 2. 位置的改变：需要当前手指的坐标。在事件对象中有几组坐标属性。 3. 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 页面中第一个触摸点 4.1 clientX clientY 基于浏览器窗口（视口）的位置坐标 4.2 pageX pageY 基于页面的位置坐标 4.3 screenX screenY 基于屏幕的位置坐标
11，手势事件
手势的条件
必须滑动过 ===> isMove = true滑动的距离50px ===> distance > 50
12，tap事件 (轻击 轻触) (响应速度快)
移动端也有click事件，在移动为了区分是滑动还是点击，click点击的触发会延时300ms，响应太慢了，会影响用户体验。 在谷歌浏览器模拟看不到300ms的效果，在真机上面才能看看到延时效果。 解决方案：
使用tap事件（不是移动端原生事件，通过touch相关事件衍生过来） （zepto.js 里面有tap事件）了解其原理使用一个叫：fastclick.js 提高移动端click响应速度的 2.1 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js 2.2 使用：用script标签的src属性进行引入
//当页面的dom元素加载完成后进行初始化
document.addEventListener('DOMContentLoaded', function() {
//初始化方法
FastClick.attach(document.body);
}, false);
//之后正常使用click事件就可以了
使用tap事件
响应的速度比click要快 150ms不能滑动
13，两栏自适应(左栏固定宽高，右栏占满剩余宽度，且内容不占用左栏下方的空间)
.box1-left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
.box2-right {
让这个元素绝对绝缘 bfc
不让其他浮动元素影响自己
不让自己的浮动去影响别的元素
overflow: hidden;
}
14，轮播图思路
定时自动播放轮播图，且实现无缝衔接
前后都要多放一张图进行衔接。为ul加过渡（在定时器内加过渡，以防出现清除过过渡的情况），然后根据索引进行定位。为了实现无缝衔接(第一张图跳最后一张图和)，应该监听transitionend过渡完成事件，判断索引是否应该跳转，索引跳转后在定位之前应该先清除掉过渡，进行瞬间跳转。 切换点要随着图片的轮播改变，根据索引切换滑动效果：利用touch事件完成
设置isMove变量判断是否触发过滑动事件。初始值为false，在move事件中置为true，在end事件操作结束后再重置为false。在start事件中清除定时器并记录起始位置，在move事件中记录移动的位置，movePosition与startPosition的差作为移动距离，以此不断更新ul的定位，为了防止出现延迟，在更新定位之前也要清除过渡。 滑动结束的时候，如果滑动的距离不超过屏幕的1/3 吸附回原图，使用过渡滑动结束的时候，如果滑动的距离超过屏幕的1/3 切换（上一张，下一张）根据滑动的方向，使用过渡
在end事件中判断isMove变量，如果isMove=true，则判断滑动的距离是否超过屏幕的1/3，并判断滑动的方向，左滑且大于屏幕的1/3，则index++；右滑且大于屏幕的1/3，则index–。为ul加过渡，最后根据index进行定位。最后重置各个位置距离变量，以及isMove重置为false。并重新添加定时器，继续自动播放。
15，区域滚动效果
条件：一个容器装着一个容器的html结构，且子容器比父容器大，父容器设置overflow: hidden;工具：使用 iscroll.js 插件使用方法：
new IScroll(document.querySelector('.jd_cateLeft'),{
scrollX:false, // X轴方向是否滚动
scrollY:true // Y轴方向是否滚动
});
// 创建一个IScroll的实例
new IScroll();
传入参数：第一个参数—>父容器节点； 第二个参数—>参数对象。
window.onload=function(){
//touch事件中要阻止浏览器的默认行为
document.querySelector(".cg_leftBox").addEventListener("touchmove",function(e){
e.preventDefault();
},false);
document.querySelector(".cg_rightBox").addEventListener("touchmove",function(e){
e.preventDefault();
},false);
/*区域滚动效果*/
/*条件：一个容器装着一个容器html结构*/
/*找到父容器*/
/*子容器大于父容器*/
new IScroll(document.querySelector('.cg_leftBox'),{
scrollX:false,
scrollY:true
});
new IScroll(document.querySelector('.cg_rightBox'),{
scrollX:false,
scrollY:true
});
};
16，为什么touch事件中要阻止浏览器的默认行为
既然使用 touch 事件那肯定是在能支持触屏的设备上运行，比如手机，手机上滑动的时候他本身就有个默认的滚屏，因此如果要操作某个DOM元素，用touchmove事件，这其实也是滑动。原本你的效果是要在某个DOM元素上滑动然后产生相应的效果，这个时候你肯定不希望手机上的浏览器屏幕滚动，所以你应该把它默认的滚动给禁止了。这样才会有好的用户体验。
17，背景样式新属性
background-origin 背景定位参考
padding-box 背景图像相对于内边距框来定位（默认）border-box 背景图像相对于边框盒来定位content-box 背景图像相对于内容框来定位 background-clip 背景剪裁
border-box 边框以外被裁剪掉（默认）padding-box 内边距以外被裁剪掉content-box 内容以外被裁剪掉
18，复习：获取页面向上卷曲的高度
document.body.scrollTopdocument.documentElement.scrollTopwindow.pageYOffset
