响应式，移动端,摘要

一，第一课<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()