移動端”宴席知多少

轉載(http://adt.aicai.com/index.php/archives/179/)

瞎折騰移動端的項目已經很長一段時間了，并不像其它企業一樣，可以有項目組去完成，基本都是一個人瞎嘗試，時而web，時而web app。恍恍惚惚過了這段歲月，也不曉得自己忙了啥。總叫別人去總結，讓別人學會總結，也該為自己總結總結了。也為了團隊之間更好的知識共享吧。如何開發移動端就跟如何上菜一樣，上菜有規則，先冷后熱，先菜后點，先咸后甜，先炒后燒等等。按照一定的程序來才能恰到好處地掌握。那么，現在還是上菜吧，客官等久了... ...

前菜（涼菜，冷盤）

一、移動端開發與PC端開發不同
大家都知曉，手機種類千千萬，也導致移動端開發面對的屏幕尺寸是各種頭疼。
Web：固定布局和彈性布局
Web app：響應式布局

二、調試工具
firefox的響應式設計視圖:Firefox 瀏覽器內置了?自定義設計視圖?的功能，可以通過?Firefox->Web 開發者->自定義設計視圖（或者摁下?Shift + Ctrl + m?）。相比網絡工具，運行更加流暢，無需聯網。

Chrome開發，chrome瀏覽器也有個Emulation，如圖：

chrome

另外，就是設備上的調試，方法很多。

1. 直接把做好的靜態頁面放到手機用瀏覽器打開查閱
2. 在本地搭建環境，比如php環境，局域網訪問ip查閱頁面（有搭建過博客的都知道）
3. 遠程調試

A:Android 設備 Chrome 遠程調試
B:uc瀏覽器開發者調試

開胃湯

那么，問題來了，移動端開發到底該如何下手？
1．關于viewport

a)概念：設備的pixels和css的pixels（總體而言，你只需要關注CSS的pixels，這些pixels指定你的樣式被如何渲染。
）
b)概念：視窗 viewport（viewport的功能在于控制你網站的最高塊狀（block）容器：<html>元素。）

viewport

viewport2

下面是link的一些用法，但是移動端也好web端也好，為了減少HTTP請求數，個人建議最好能使用媒體查詢來解決的可以盡可能的用媒體查詢。

link

媒體查詢如下：

媒體查詢

頭菜

作為頭菜，一般宴會來說，頭菜是代表性的菜點。那么說到移動端呢？

移動端的reset

時過境遷，Reset 逐漸淡出的前沿前端的視野，normalize.css?取而代之。normalize.css，統一樣式的同時保留可辨識性；reset 統一樣式，完全沒有可讀性，破壞原有標簽的語義化。針對每個項目的不同，各自可以基于Normalize.css，根據目前我們大家的使用習慣進行了一些清零及移動端的特點添加一些基礎樣式。

在這里會提到一個rem,想當初應該很多人也討論研究過px，pt，em等單位吧。rem是CSS3新引進來的一個度量單位，舉個例子：“em”是相對于其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對于根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值。

瀏覽器的基準字號設置為?62.5%，也就是?10px，現在?1rem = 10px?—— 為了計算方便。然后在body?上應用了?font-size: 1.6rem;，將頁面字號設置為?16px。
html {font-size: 62.5%;} body {font-size: 1.6rem; /* =16px */}

可以用以下的代碼片段保證在低端瀏覽器下也不會出問題

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px /

移動端的html5+css3

css3代替DOM animation,使用setTimeout定時器, 定時修改DOM元素的style屬性。
css3使用設備GPU渲染，動用硬件設備本身的計算能力來做一些展示，效率上要比DOM animation要高很多。

@keyframes
animation-name（動畫名稱）
animation-duration（動畫持續時間）
animation-delay（延遲執行時間）
animation-timing-function（動畫形變函數指定）
animation-play-state（播放狀態指定）
animation-iteration-count（無限循環）

至于HTML5，大家目前用的最多的也就僅僅是那幾個標簽而已，想詳細了解的自便吧。比如：

<input type="text" placeholder="規定幫助用戶填寫輸入字段的提示">
<input type="number">
<input type="date">
<input type="range">
<input type="color">
<input type="email">
<input type="search">

移動端的javascript

先說這一類的框架吧：
JQuery mobile，Sencha Touch等都是很龐大的UI框架。
Zepto.js：框架小，類jQuery，沒有多余的其他模塊，適合團隊自己擴展。（不支持WP）
沒有一個很好的團隊去折騰的話，還是建議使用jqm，因為你到后面還是會改成jqm搭配Hammer.js來搭建

說起移動端的javascript，使用手勢操作代替鼠標輸入/出事件。開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。那就先來看看PC端的一些事件：(mousedown, mouseup, click)

移動端的手勢事件：
touchstart //當手指接觸屏幕時觸發
touchmove //當已經接觸屏幕的手指開始移動后觸發
touchend //當手指離開屏幕時觸發
touchcancel //當在滑動手機的過程中突然出現一個系統事件，比如電話。這會就cancel掉。（基本很少用）

為何要用touch事件代替click事件？
- click事件300ms延時
- touch事件支持多點觸摸
- 手勢操作

移動端的css3的自定義字體（@font-face），前一篇文章有做介紹。這里就不詳細述說。