寫在前面：本人剛剛接觸移動端開發，希望自己的見解能夠幫助到他人，不足之處還望提醒。
1 移動端開發分類
1.1 Native App 原生App開發
優點：
（1）用戶體驗好
（2）性能穩定
（3）操作速度快
（4）能夠訪問本地資源（通訊錄，相冊）
（5）能夠設計出色的動效，轉場
（6）擁有系統級別的貼心通知或提醒
（7）用戶留存率高
缺點：
（1）開發成本高
（2）維護成本高
（3）更新緩慢，根據不同平臺，提交–審覈–上線流程較複雜。
總的來說，native app開發從android、ios智能手機出現就有了開發技術，性能體驗最優，API比較完善，但是學習起來難度比較高，開發成本比較高（跟開發週期相對來說比較長也是有關係的）。
2 Web App 網頁App開發
優點：
（1）發版完全自控，隨時更新
（2）跨平臺，因爲本身來說用的是Web的東西，所以可以在任意平臺上運行
（3）成本小，Web頁面嵌入Webview開發起來速度非常快，一個人就可以輕鬆搞定
缺點：
（1）性能差
（2）弱網絡或無網絡條件下體驗差
（3）適用有展示類需求的項目，但是如果要實現的功能比較複雜的話就顯得力不從心
總的來說，相比Native App，Web App體驗中受限於網絡環境和渲染性能。Web APP對網絡環境的依賴性較大，因爲Web APP中的H5頁面，當用戶使用時，去服務器請求顯示頁面。如果此時用戶恰巧遇到網速慢，網絡不穩定等其他環境時，用戶請求頁面的效率大打折扣，在用戶使用中會出現不流暢，斷斷續續的不良感受。同時，H5技術自身渲染性能較弱：對複雜的圖形樣式，多樣的動效，自定義字體等的支持性不強。因此，應注意以下幾點：1.簡化不重要的動畫/動效；2.簡化複雜的圖形文字樣式；3.減少頁面渲染的頻率和次數。
3 Hybrid App 混合型App開發
優點：
（1）體驗好
（2）穩定性強動態性強
（3）成本相對低跨平臺
缺點：對團隊技術棧要求相對高性能優化
Hybrid App就是Native結合Web混合開發，Native+JS代碼代表作是cordova前身是phonegap，現在移交給Apache，核心JsBridge，JS調Java，Java調JS。因爲混合開發，所以體驗接近原生、穩定性強而且發版快。
2 Viewport視口
2.1 視口
視口是移動設備上用來顯示網頁的區域，一般會比移動設備可視區域大，寬度可能是980px或者1024px，目的是爲了顯示下整個爲PC端設計的網頁。這樣帶來的後果是移動端會出現橫向滾動條，爲了避免這種情況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，可以用meta標籤，name="viewport"來設置視口的大小，將視口的大小設置爲和移動設備可視區一樣的大小。
在移動端用來承載網頁的這個區域，就是我們的視覺窗口，viewport（視口），這個區域可以設置高度寬度，可以按比例放大縮小，而且能設置是否允許用戶自行縮放。
2.2參數說明
width：寬度設置的是viewport寬度，可以設置device-width特殊值initial-scale：初始縮放比，大於0的數字
maximum-scale：最大縮放比
minimum-scale：最小縮放比
user-scalable：用戶是否可以縮放，yes或no（1或0）
<!--viewport只有移動端才能識別-->
<!--設置寬度 設置成和設備一樣的寬度(width=device-width)-->
<!--設置默認的縮放比 initial-scale =1.0-->
<!--設置是否允許用戶自行縮放 user-scalable：no or yes-->
2.3 設置方法
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
3 移動端適配佈局
使用百分比自適應佈局（流式佈局）同時需要對移動端的viewport視口進行設置，就可以達到適配的目的。
3.1 流體佈局+少量響應式
流體佈局：使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線（border）無法用百分比，可以使用樣式中的計算函數calc()來設置寬度，或者使用box-sizing屬性將盒子設置爲邊線計算盒子尺寸。響應式佈局：使用媒體查詢的方式，通過查詢瀏覽器的寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局，響應式佈局的頁面可以適配多種終端屏幕（pc、平板、手機）。
3.2 基於rem的佈局
rem指的是參照根節點的文字大小，根節點指的是html標籤，設置html標籤的大小，其他的元素相關尺寸設置用rem。這樣，所有元素都有了統一的參照標準，改變html文字的大小，就會改變所有元素用rem設置的尺寸大小。
3.3 彈性盒模型
詳解點擊鏈接：https://blog.csdn.net/qq_42451979/article/details/80753153
寫在最後：以上是我對移動端開發的部分理解，詳細內容稍後更新。