最先我們要確立APP開發和H5開發是不一樣的，因而在設計上也是有差別。

在開發上：

APP應用單獨安裝文件，不一樣服務平臺必須單獨語言表達開發，如安卓系統Java, iPhoneObjective-C，可適用多用途迭代更新要求，版本升級維護保養會牽涉到手機客戶端和服務器端很有可能會出現資源分享；

安裝文件能夠適用無網絡訪問，可以支撐點較比較復雜的作用邏輯性，完成深度1互動，可用多情景；

H5是手機上web，網頁頁面方式開啟，兼容多服務平臺，版本升級在服務器端，無手機客戶端資源分享，精巧輕巧；

H5必須互聯網適用，許多 移動設備作用不兼容例如手機鏡頭，作用邏輯性方面適用比較有限。

在設計上：

App的頂端導航欄是該商品的，且深層次網頁頁面也是有返回按鈕，且能對設備的交互技術開展更深入的設計。

app例圖

H5則是采用電腦瀏覽器內置的導航條，沒有返回按鈕，必須在H5設計返回按鈕，且交互技術由于網絡資源難題比較單一。

h5例圖

“適配時字體樣式發生難題？”

了解了app和h5的差別，我們在做設計的情況下就更要關心適配難題了。

立即以App的設計規格在大部分H5上是不可用的，必須實現實際適配。

當手機端設計稿適配到H5時，一般會應用這兩種方式：

1.用rem布局開展適配。設計稿界定單倍屏的尺寸，當必須適配到幾倍屏時前面會獲得根原素尺寸，根據根原素去開展全自動適配；2.應用純px合理布局。假如單倍屏沒法符合要求，則依據具體開發狀況，設計稿能夠空出好多個倍率圖，讓開發應用不一樣倍率圖，對手機上相匹配屏幕分辨率開展適配。

由于開發沒有應用rem布局，僅用了純px合理布局，當倍屏不與此同時，字體樣式會減小或變大，因此經常出現這個情形時，必須了解實際適配到哪一個屏幕分辨率，讓開發按相匹配倍率去適配，或是導出來相對應的倍率圖給開發開展適配。