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

在開發(fā)上：

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

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

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

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

在設計上：

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

app例圖

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

h5例圖

“適配時字體樣式發(fā)生難題？”

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

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

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

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

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