移動端續講及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 

　　})