1. 适配方案
/流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局/
/*视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。
承载关系：浏览器---->viewport---->网页
*/
/*适配要求：
1. 网页宽度必须和浏览器保持一致
2. 默认显示的缩放比例和PC端保持（缩放比例1.0）
3. 不允许用户自行缩放网页
满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。
*/
/*适配设置：
如果任何设置都没有，默认走的就是viewport的默认设置
去设置新的viewport设置,达到适配要求。
设置视口的标签 在head里面并且应该紧接着编码设置
viewport的功能：
1. width 可以设置宽度 (device-width 当前设备的宽度)
2. height 可以设置高度
3. initial-scale 可以设置默认的缩放比例
4. user-scalable 可以设置是否允许用户自行缩放
5. maximum-scale 可以设置最大缩放比例
6. minimum-scale 可以设置最小缩放比例
在 content="" 使用以上参数
1. width=device-width 宽度一致比例是1.0
2. initial-scale=1.0 宽度一致比例是1.0
3. user-scalable=no 不允许用户自行缩放 （yes，no 1,0）
标准适配方案：
meta:vp + tab 快捷方式
*/
非主流的适配方案：
1.页面的真实尺寸会比在设备的上尺寸要大几倍
2.假设设备是iphone4 ->320px ->网页尺寸 640px
3.缩放操作，有2倍的 有3倍 和屏幕像素比有关系
4.什么是屏幕像素（物理像素，像素点） px(页面的尺寸单位)
5.物理像素 是设备显示屏的最小可视颗粒的大小 以前的手机（直板手机）
6.现在有 高清显示屏 视网膜屏 retina屏
7.显示的效果就提高了更细腻，但是在显示同等质量的图片的时候（模糊效果）
8.在屏幕像素比（一个px宽的屏幕能放几个物理像素）高的设备 图片（非矢量）显示会模糊
9.提高网页的清晰度 根据屏幕的像素比 来缩放网页
10.但是这样的适配方案成本非常高
11.一般的企业开发当中使用的还是标准化设置 在高清显示屏当中：图片可能会失真（模糊效果）
1.可以使用jquery,但是不建议
2.jquery 做了很多桌面浏览器的兼容问题 特别是IE，但是移动端没有IE浏览器
3.主流的浏览器：谷歌 火狐（2016年停止了维护和更新） safari浏览器 百度 360 qq …
4.特点：内核基本上都是 webkit 或者 blink 兼容 -webkit-
5.使用H5的api 或者说使用一个 叫做： zepto.js 的库（基于高版本浏览器开发）
<style>
body {
padding: 0;
margin: 0;
}
.box {
width: 100%;
height: 500px;
background: pink;
}
</style>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
2. 去除下边距
<style>
/*三种去除下边距方式*/
body{
/*font-size: 0px;*/
}
/*img{
display: block;
}*/
img{
vertical-align: middle;
}
</style>
3. 触摸事件
解释touch:
- touch是移动端的触摸事件 而且是一组事件
- touchstart 当手指触摸屏幕的时候触发
- touchmove 当手指在屏幕来回的滑动时候触发
- touchend 当手指离开屏幕的时候触发
- touchcancel 当被迫终止滑动的时候触发（来电，弹消息）
- 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件
使用touch:
1.绑定事件：box.addEventListener(‘touchstart’,function () { });
2.事件对象：
名字：TouchList------触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合
changedTouches 改变后的触摸点集合
targetTouches 当前元素的触发点集合
touches 页面上所有触发点集合
3.触摸点集合在每个事件触发的时候会不会去记录触摸
changedTouches 每个事件都会记录
targetTouches，touches 在离开屏幕的时候无法记录触摸点
4.分析滑动实现的原理：
4.1 就是让触摸的元素随着手指的滑动做位置的改变
4.2 位置的改变：需要当前手指的坐标
4.3 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
4.4 clientX clientY 基于浏览器窗口（视口）
4.4 pageX pageY 基于页面（视口）
4.4 screenX screenY 基于屏幕
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: pink;
float: left;
}
</style>
<div class="box"></div>
<script>
window.onload = function () {
var box = document.querySelector('.box');
box.addEventListener('touchstart',function (e) {
console.log('start');
console.log(e.touches[0].clientX,e.touches[0].clientY);
console.log(e.touches[0].pageX,e.touches[0].pageY);
console.log(e.touches[0].screenX,e.touches[0].screenY);
});
box.addEventListener('touchmove',function (e) {
console.log('move');
console.log(e);
});
box.addEventListener('touchend',function (e) {
console.log('end');
console.log(e);
});
/*box.addEventListener('click',function (e) {
console.log('click');
console.log(e);
});*/
}
</script>
4. 手势事件
<script>
window.onload = function () {
/*1. 理解移动端的手势事件*/
/*2. swipe swipeLeft swipeRight swipeUp swipeDown */
/*3. 左滑和右滑手势怎么实现*/
var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
/*手势的条件*/
/*1.必须滑动过*/
/*2.滑动的距离50px*/
var isMove = false;
var startX = 0;
var distanceX = 0;
dom.addEventListener('touchstart',function (e) {
startX = e.touches[0].clientX;
});
dom.addEventListener('touchmove',function (e) {
isMove = true;
var moveX = e.touches[0].clientX;
distanceX = moveX - startX;
});
dom.addEventListener('touchend',function (e) {
/*滑动结束*/
if(isMove && Math.abs(distanceX) > 50){
if(distanceX > 0){
rightCallback && rightCallback.call(this,e);
}else{
leftCallback && leftCallback.call(this,e);
}
}
/*重置参数*/
isMove = false;
startX = 0;
distanceX = 0;
});
}
bindSwipeEvent(document.querySelector('.box'),function (e) {
console.log(this);
console.log(e);
console.log('左滑手势');
},function (e) {
console.log(this);
console.log(e);
console.log('右滑手势');
});
}
</script>
5. 两栏自适应
<style>
body{
margin: 0;
padding: 0;
}
.box1{
float: left;
width: 100px;
height: 100px;
background: pink;
}
.box2{
/*让这个元素绝对绝缘 bfc*/
/*不让其他浮动元素影响自己*/
/*不让自己的浮动去影响别的元素*/
overflow: hidden;
}
</style>
<div class="box1"></div>
<div class="box2">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
6. tap事件
- tap事件 轻击 轻触 （响应速度快）
- 移动端也有click事件 （在移动为了区分是滑动还是点击，click点击延时300ms）
- 影响用户体验 响应太慢了。
- 解决方案：
4.1 使用tap事件（不是移动端原生事件，通过touch相关事件衍生过来） （zepto.js tap事件）了解其原理
4.2 使用一个叫：fastclick.js 提供移动端click响应速度的
4.2.1 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
4.2.2 使用：
<script src="../js/fastclick.min.js"></script>
<script>
/*当页面的dom元素加载完成*/
document.addEventListener('DOMContentLoaded', function() {
/*初始化方法*/
FastClick.attach(document.body);
}, false);
/*正常使用click事件就可以了*/
</script>
<script>
window.onload = function () {
/*使用tap事件*/
/*1. 响应的速度比click要快 150ms */
/*2. 不能滑动*/
var bindTapEvent = function (dom, callback) {
/*事件的执行顺序*/
/*在谷歌浏览器模拟看不到300ms的效果*/
/*在真机上面才能看看到延时效果*/
var startTime = 0;
var isMove = false;
dom.addEventListener('touchstart', function () {
//console.log('touchstart');
startTime = Date.now();
/*Date.now();*/
});
dom.addEventListener('touchmove', function () {
//console.log('touchmove');
isMove = true;
});
dom.addEventListener('touchend', function (e) {
//console.log('touchend');
console.log((Date.now() - startTime));
if ((Date.now() - startTime) < 150 && !isMove) {
callback && callback.call(this, e);
}
startTime = 0;
isMove = false;
});
/*dom.addEventListener('click',function () {
//console.log('click');
});*/
}
bindTapEvent(document.querySelector('.box'), function (e) {
console.log(this);
console.log(e);
console.log('tap事件')
});
}
</script>