一，第一课<br/>
1.什么是响应式
可以用一套代码，来适应多种设备，让用户达到更好地访问效果
2.流程
1600==>一个页面
800==>另外一个
480==>另外一个页面
问题
1》开发的时候选择哪个宽度写代码
1》看情况处理
2》首选什么浏览器进行开发（兼容到什么地步）
1》55%谷歌
2》5%ie
3》范围值应该是多少
大于800==》1600
480-800==》800
小于480==》480
二、第二课<br/>
4》谁负责切图
UI懂H5
H5懂UI
5》还原度
不太能还原的特别极致
6》开发项目前最重要==》沟通
三、第三课<br/>
7》项目木步骤
1.html
2.css
3.JS(特效)
8》响应式图片
img srcset==>缓存
picture==>解决本身srcset的问题，但是不兼容IE8或者ie8以下
svg
解决响应式图片终极版
9》网址
ehcto.ehcto.com
四、zepto(JS库)<br/>
jquery.js ===》PC
zepto.js ===》移动端(轻量级)
相同点：
api几乎差不多一样
不同点：
1》事件不同
2》体积大小不同
*******注意：在移动端页面中使用click事件会有300毫秒的延迟
click===>tap
swipeLeft,
swipeRight,
swipeUp,
swipeDown
五、iscroll.js
IScroll.js插件是兼容所有移动端滚动条事件的插件，
在某些安卓机中，我们无法通过overflo:scroll这个css
属性来出现滚动条；它也可以非常好的在一个容器元素中处理
滚动;
DOM:
1>要给滚动区域加入一个父元素
2>父元素的高度值要小于滚动区块的高度
3>new IScroll(".box"){
scrollbars:true
是否显示滚动条。默认为false
fadeScrollbars:true
滚动条淡入淡出效果，当然前提是你滚动条显示了。默认为false
interactiveScrollbars
是否拖动滚动条。默认为false;
resizeScrollbars
滚动条的长度是按照比例设置的，如果想要固定尺寸，可以设置为flase;默认为true;
bounce: false
滚动到达容器边界时是否执行反弹动画。默认为true;
mouseWheel:true
是否显示启用鼠标滚动;默认为false;
invertWheelDirection
激活鼠标滚动后是否启用反向滚动;默认为false;
click:true
iScroll禁止默认鼠标的点击行为，如果要使用设置true;默认为false;
disableMouse、disablePointer、options.disableTouch
IScrol默认监听所有的指针事件，如果确认项目定位的平台，可以将不使用的效果禁用，减少资源占用；默认为false;
startX、startY
设置滚动条初始偏移位置；默认为无;
};
六、swiper（滑动）
官网：https://www.swiper.com.cn/
使用：
1》获取到swiper.js、swiper.css
2》先把dom元素赋值
3》new Swiper
4》设置功能（参数）
{
loop:true ==>循环
autoplay ==>自动播放
}
七、图片懒加载（预加载） echo.js
使用:
1>引入echo.js
2>在dom节点图片上加入
data-echo='要加载的图片路径'
3>echo.init()