移动端续讲及zepto移动端插件外加touch插件介绍

　　媒体查询：针对不同设备，显示不同的样式。

　　设备像素比：dpr  device-piexl-ratio

　　在he开发中，要一个3陪高清图片；

　　　　1080>=320*3　　（主要是为了解决图片的失真问题）

　　移动端忌讳出现x轴滚动条，所以要使用overflow-x:hidden; (一般在html/body标签上设置)

　　box-sizing:border-box　　解决移动端一些问题；

　　看移动端设备，我们所作的页面只能在浏览器中打开

　　查看浏览器的信息： window.navigator.usetagent属性上，我们可以通过这个用来检测设备

　　var reg=/ipad/;

　　if(reg.test(window.navigator.userAgent)){ 说明是苹果设备 }

　　css通过media all and (-webkit-device-pixel-ratio:3.0)　　设置像素比；

　　js获取像素比：window.device-pixel-ratio

　　移动端的主体需要js和css调整；

　　　　max-width:640px　　（主体的宽基本都这样设）

　　position:fixed;　　改变元素的本质；

　　rem：移动端适配

　　input；

　　　　input标签在android系统上不带圆角，在ios上带圆角；

　　　　input,botton{

　　　　　　-webkit-appearance:none;

　　　　}

　　a标签，在移动端会有一个高亮效果，

　　　　去除高亮效果：

　　　　a{

　　　　　　-webkit-tap-highlight-color:transparent;

　　　　}

　　布局方式：

　　　　双飞翼

　　　　圣杯

　　　　弹性

　　　　自适应

　　中间固定，两端自适应的案例

　　<div class="box">

　　　　<div></div>

　　　　<div></div>

　　　　<div></div>

　　</div>

　　.box>div:nth-of-type(1){

　　　　flex:1;

　　}

　　.box>div:nth-of-type(2){

　　　　width:600px;

　　}

　　.box>div:nth-of-type(3){

　　　　flex:1;

　　}

　　中间自适应，两端固定

　　

　　<div class="box">

　　　　<div></div>

　　　　<div></div>

　　　　<div></div>

　　</div>

　　.box>div:nth-of-type(1){

　　　　width:100px

　　}

　　.box>div:nth-of-type(2){

　　　　flex:1

　　}

　　.box>div:nth-of-type(3){

　　　　width:100px

　　}

　　原生写移动端事件，用户效果很差，所以我们使用了zepto.js的插件，

　　zepto插件与jQuery极其相似；

　　zepto的优势：

　　　　zepto是手机端的框架，和jQuery最大的区别，jQuery对ie做了太多的处理，而zepto不需要，且压缩后仅有9kB，（轻量级）

　　1.文档加载zepto打头；

　　　　zepto(function(){

　　})

　　2.选择器：使用$("")，进行元素选取，与jQuery一样；

　　3.$.each()：对数组，集合，对象进行遍历

　　4.$.map()：对数组加工，得到新数组；

　　$.each与$.map的区别？

　　　　each中的回调，第一个参数索引，第二个参数是元素，map与他相反，且map必须有return

　　　　map返回加工后的新集合；each返回原来的集合

　　5.add()：添加元素到当前匹配的元素

　　6.addClass()：为每个元素添加类，多个类用空格隔开；

　　after()：在每个匹配的元素后添加内容；

　　before()：在每个匹配元素前面添加内容

　　append()：在匹配的结尾处插入内容；

　　after()与append()的区别？

　　　　after插入在元素后面，但在元素外；append在元素里；

　　after()：读取或设置元素的属性；

　　children()：获取每个匹配元素直接子元素，参数可过滤

　　css()：读取或设置css属性

　　zepto中的特效只有show()和hide()

　　事件：

　　　　原生js在移动端的事件

　　　　js原生中，只有dom2级事件写法

　　　　div.addEventListener("事件名",fn,false)

　　　　div.onclick=function(){}　　dom0级事件；

　　js有touch系列事件，有click   touchstart（触摸）　touchmove（移动）　　touchend（离开）  但效果不好

　　　　click就相当于单击，不建议使用，

　　　　移动设备，当第一次点击之后，300ms之内又去点击了，说明是双击，300ms内没去点击说明是单击

　　trouchstart

　　

　　通过在zepto中在引入touch插件，便可使用zepto中拓展的事件了

　　分为：点击和滑动；

　　点击：singleTap（单击）　　doubleTap（双击）　　longTap(长按)

　　滑动：swipe（滑动）　　swipeLeft(左滑)　　swipeRight(右滑)　　swipeUp(上滑)　　swipeDown(下滑)　　

　　zepto中使用事件函数，需要在zepto的后面引入touch.js文件，否则报错

　　swiper插件　　轮播

　　zepto 中的 on 事件，可以进行绑定事件，最恐怖的是，我们可以进行事件委托的写法

　　$("body").on("click",".box",function(){

　　　　console.log(我是 box 元素，我被点击了)　　//为什么这样写，1 可以不需要考虑 异步的事件，2. 我们是对 body 的点击事件，但是通过事件委托传递给 box

　　})