移動端開發技術文檔

1.字體

Web頁面採用的是絕對的字體，即像素（px）

APP開發採用的是pt，

http://www.docin.com/p-1517127917.html?docfrom=rrela   字體與pt之間的對應關係

Html5移動端頁面開發採用的是相對字體 （rm / rem） 

rm 是相對於父元素，rem是相對於文檔根元素來定義；

2.Html5頁面佈局

移動端開發的佈局是相對的，不能設置固定大小，包括各DOM元素；

如頁面上的圖片，通常來講有二種形式：

1. 全屏寬或帶邊距的圖片；
2. 圖片加文字，利用文字塊來定義圖片的高度

注意：html5頁面中不適合在一行中使用多列布局圖片

（解決方法：a. 給圖片固定的相對高度； b. js計算頁面寬度，利用該寬度計算出該列圖片的高度 ）

3.頁面中JS庫採用的是Zepto.js，精簡版的Jquery，與Jquery有類似的語法

詳見API地址：http://www.zeptojs.cn/

如click事件，寫法以下：

$(".post-rate .icon-hx003").on("click",function () {
    $(".post-rate .icon-hx003").removeClass("cur");
    var score = parseInt($(this).attr("data-score"));
    for(var i=0; i<=score-1;i++) {
        $(".post-rate .icon-hx003").eq(i).addClass("cur");
    }
});

4.FastClick 解決點擊事件穿透

如：click事件做用等同於tap事件，咱們能夠用使用Jquery的習慣來寫移動端業務/事件代碼

使用很簡單：

FastClick.attach(document.body);

5.Lazyload 圖片懶加載

滾動加載圖片（懶加載）原理：http://www.tuicool.com/articles/rUjIZzb

6.移動端分頁

原理：利用頁面滾動，距底部距離來實現分頁

在下一頁數據請求成功後，移除loading塊

7.自定義開發的控件

日期控件：

選擇控件：

8.開發的動畫

首頁開屏動畫；

向左滑動動畫；

向上滑動動畫；

9.項目中使用的字體圖標

圖標定義：

頁面引用：

<span class=」icon-password」></span>   即在頁面中引用了這個圖標

CSS設置大小，顏色等

.icon-password {

　　font-size: 2rem;

　　line-height: 2.4rem;

　　color: #fff;

　　.borderRadius(.3rem);

}

 

附件：

iPhone/iPad/Android UI尺寸規範   

http://tools.jb51.net/table/ui