视觉窗口：
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 可以设置最小缩放比例
* 在<meta name="viewport" content=""> content="" 使用以上参数
*
* 标准的适配方案：content="width=device-width,initial-scale=1.0,user-scalable=0"
快捷键：meta:vp + tab
非主流的适配方案：
1.页面的真实尺寸会比在设备上的尺寸要大几倍
2.假设设备是iphone4 -> 320px -> 网页尺寸 640px
3.缩放操作，有2倍，有3倍，和屏幕像素比有关系
4.什么是屏幕像素（物理像素） px（页面的尺寸单位）
5.物理像素是设备显示屏的最小可视颗粒的大小
在屏幕像素比高的设备（一个px宽的屏幕能放几个物理像素） 图片（非矢量）会显示模糊
提高网页的清晰度，根据屏幕的像素比来缩放网页
但是这样的适配方案成本非常高
一般的企业开发中使用的还是标准设备
触摸事件的相关知识
解释touch
解释touch
1.touch是移动端的触摸事件，而且是一组事件
2.touchstart 当手指触摸屏幕的时候触发
3.touchmove 当手指在屏幕来回的滑动时候触发
4.touchend 当手指离开屏幕的时候触发
5.touchcancel 当被迫终止滑动的时候触发（来电，弹消息）
6.利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件
使用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.5 pageX pageY 基于页面（视口）
4.6 screenX screenY 基于屏幕
移动端下拉和左右拉动
iscroll.js插件
/**
* 区域滚动效果
* 条件：一个容器装着一个容器
* 找到大容器
* 子容器大于父容器
new IScroll(document.querySelector('.jd_cateLeft'),{
scrollX: false,
scrollY: true
});
两栏自适应
normalize&reset区别
共同点：都是重置样式，增强浏览器的变现一致性
不同点：
例子：ul
reset.css list-style:none; ---- 因为需求
normalize.css 不会重置ul样式 -----本身已经在每个浏览器表现一致的元素
总结：都是增强浏览器的表现一致性，但是normalize不会重置已经一致的元素
设备大小
1、大屏设备 lg:大屏设备以上（包括大屏设备）生效
2、中屏设备 md:中屏设备以上（包括中屏设备）生效
3、小屏设备 sm:小屏设备以上（包括小屏设备）生效
4、超小屏设备 xs:所有设备生效
jquery获取宽度的几种方法
/**
* width() 内容
* innerWidth() 内容+内边框
* outerWidth() 内容+内边框+边框
* outerWidth(true) 内容+内边框+边框+外边框
*/
less在浏览器端直接使用
<link rel="stylesheet" type="text/less" href="../less/test.less">
<script src="../lib/less/less.js"></script> <script>less.watch();</script>
</head>
<body>
<h3>在浏览器端使用less</h3>
<p>1.less无法在浏览器端直接使用</p>
<p>2.浏览器不识别</p>
<p>3.必须解析成css代码</p>
<p>4.通过less解析插件（javascript）</p>
<p>5.引入less文件需要加上 type="text/less"</p><p>6.less.watch();不刷新就可以预览样式</p>
<p>7.以http形式打开网页预览</p>
</body>
</html>
tap介绍
tap是zepto绑定的事件，和click不同
tap绑定了touchstart, touchmove, window.touchend
tap事件击穿
消息框点击的时候会消失，正好和点击的按钮在一起的时候就会出现击穿现象。
解决方法：使用setTimeout()方法
JSON含有兼容问题
json IE6,7不兼容
解决方法：使用json2插件
from表单数据的数列化–serialize
var data = $('form').serialize();
var data = $('form').serializeArray();
来源：CSDN
作者：、小伙
链接：https://blog.csdn.net/weixin_43794007/article/details/103473854