移动端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.scrollTop
- document.documentElement.scrollTop
- window.pageYOffset