移動web

1. 移動web與電腦端web
1.1 二者佈局的區別
1.1.1 電腦端web
在作電腦端頁面佈局時,給頁面設置的常爲固定的長和寬,爲的是頁面不會由於不一樣分辨率和不一樣瀏覽器發生頁面佈局的錯位.
如今咱們也能經過給父盒子設置display:flex;來實現彈性佈局,能夠經過只對父盒子設置寬高,實現盒子內部的佈局不會由於瀏覽器大小而發生佈局改變.
1.1.2 移動web
移動web的開發就和電腦端有着明顯的區別,緣由移動端的可視區域大小明顯比電腦端小,而且可視區域的大小有許多種類,沒法固定一種大小來設置頁面,會使得其餘移動端的客戶滿意度極差.全部咱們在移動web開發時,須要考慮視口大小的不一樣,須要使頁面自適應不一樣大小的視口.
這時咱們會想到使用彈性佈局來實現,彈性佈局是能夠極好的知足自適應視口的大小,使得頁面佈局不發生錯誤.可是因爲在如今移動端頁面軟件中,佔比最多的UC並不支持彈性佈局,因此咱們只能將其的使用推薦推後.
而如今比較多的是使用百分百的佈局方式,在給頁面設置寬高時,使用百分數來設置,使總體的寬高根據移動端視口大小來改變頁面的顯示寬高.
如今移動端web顯示一般爲寬度固定,高度根據內容增長.因此在設置移動端web佈局時,會將頁面的寬度根據視口的寬度進行固定,而且能夠設置最大及最小寬度,爲得是若是自適應太小或者過大的寬度時使頁面佈局錯亂或者不美觀.
1.2 共同點
二者在佈局時除了移動端須要考慮移動設備的視口不一樣之外,其餘的html及css設置大體相同,具體的項目進行具體的佈局調試.
2. 移動端的事件
2.1 電腦端的觸發事件
在電腦端寫JS代碼時,有如下經常使用的事件類型,如點擊,雙擊等,這些事件類型中有許多都是基於鼠標點擊來觸發的.
2.2 移動端的觸發事件
在移動端web中點擊事件就至關於咱們用手指點擊了一下頁面中的一個元素,而在移動端頁面中有一個移動端特有的事件類型,那就是touch事件,它分紅三個事件:
touchstart:手指觸摸開始時觸發
touchmove:手指觸摸並在頁面上滑動時觸發
touchend:手指離開頁面時觸發
這三個事件中若是不發生touchmove事件就相對於click事件,而且在一些瀏覽器中click事件的事件響應時間相對touch事件的事件響應時間明顯要長,也就會形成使用這些瀏覽器的用戶會明顯感受到頁面的延遲及卡頓,使得客戶滿意度較差.
這時咱們能夠結合touch的三個事件來實現click事件的功能,固然相對click來講須要寫的代碼也會相對多一些.
在這個實現的過程最主要的是判斷手指觸摸屏幕和手指離開屏幕過程當中是否發生了touchmove事件,若是沒有發生能夠認爲是點擊,並觸發點擊的事件處理函數,若是發生了則認爲不是點擊,不觸發點擊事件的處理函數.若是須要考慮是不是長按,則須要計算開始觸摸和結束觸摸之間的時間差.
var startTime = 0;//定義開始觸發時的時間
var maxTime = 200;//定義判斷最大的間隔時間
var isMove = false;//定義標示,判斷是否發生移動
dom.addEventListener('touchstart', function(e) {
 startTime = Date.now(); // 記錄開始觸發的時間初始值
})
dom.addEventListener('touchmove', function(e) {
 isMove = true;//若是發生移動,將標示賦值true
})
dom.addEventListener('touchend', function(e) {
 var touchTime = Date.now() - startTime;//計算並獲取開始和結束的差值時間
 if (touchTime <= maxTime && isMove == false) {
  callback(e);//判斷是否在最大間隔時間內,而且判斷是否觸發了移動
 }
 isMove = false;// 重置標示
})
3. 移動端的'jQ'
在作電腦端頁面時,咱們會使用jQuery,它是基於JS的一個JS數據庫,封裝了許多方法.而在移動端web中也有適用於移動端頁面開發的'jQ',那就是zepto,它是一個基於jQ的一個數據庫,使用方法與jQ一致,它多出來的是適用於移動端特有的方法.
在調用zepto進行開發的時候須要注意的是,它不一樣於jQ一個文件包含了全部的方法功能,zepto中不一樣的功能封裝在不一樣的文件中,在開發時須要在調用zepto主文件的同時還須要調用一些實現具體功能的子文件.
4. 響應式佈局
4.1 響應式佈局的概念
響應式佈局是將電腦端web佈局和移動端web佈局相結合的佈局方式.實現的功能是編寫一份頁面代碼,使得頁面有效的適配PC設備,移動設備等多種設備.
一般一個網站的開發須要考慮適配不一樣設備,不一樣系統以及不一樣分辨率,這樣會使得開發過程須要不一樣類型的開發人員進行適配對應部分的開發.而響應式佈局的出現使得一個頁面開發只須要一個開發團隊就能完成,而且能夠知足適配多種設備的要求.
4.2 響應式佈局的原理
響應式佈局的基礎是經過媒體查詢功能來實現的.經過在媒體查詢語句中設置不一樣的判斷要求及知足判斷要求時頁面的樣式,來改變頁面在不一樣設備中顯示的佈局樣式.
媒體查詢的語法:
@media screen  and (){}:()中寫入判斷條件如min-width:xxpx;,在{}中寫入知足判斷條件時的頁面元素佈局樣式.
4.3 響應式佈局框架
響應式佈局的出現可使一個頁面同時適配不一樣的設備.可是實現功能的同時使得開發人員須要在頁面中寫多份頁面樣式來知足要求.這樣會出現一些沒必要要的樣式重複.因此也就促就了響應式佈局框架的出現.
4.3.1 bootstrap框架
咱們能夠經過查看框架中的CSS樣式表,來選擇適用於咱們項目的佈局樣式.