怎么用HTML5開發移動web

這篇文章將為大家詳細講解有關怎么用HTML5開發移動web，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　一、移動web開發現狀：

　　當下人們使用頻率最高的設備莫過于手機了，大家對網站的認知是越來越清晰，網站建設已成為企業宣傳與營銷的重要途徑，隨之移動端網站建設也成趨勢。

　　移動web 開發指的是需要適配移動設備的網頁開發。

　　移動web開發與pc端web開發沒有本質的區別，使用的還是HTML/CSS/JavaScript的技術。

　　二、移動端與pc端 web開發的區別

　　1、瀏覽器不同

　　移動端的瀏覽器與pc端不同

　　谷歌瀏覽器 蘋果瀏覽器、 UC瀏覽器 QQ瀏覽器  百度手機瀏覽器  360安全瀏覽器  搜狗瀏覽器  獵豹瀏覽器等

　　國內的手機瀏覽器都是根據webkit內核修改過來的，國內沒有自主研發的內核，國內的操作系統也是基于Android系統修改的。因此在移動端，css3屬性只需要加webkit前綴即可。

　　2、屏幕尺寸

　　移動端設備尺寸不一樣（尺寸非常多，碎片化很嚴重）

　　Android： 320*480 480*800  540*960 720*1280 1080*1920 2k屏 4k屏

　　iphpne：  640*960 640*1136 750*1334 1242*2208

　　讓頁面在不同手機屏幕中進行適配，寬度自適應， 基于手機全屏進行布局；

　　在進行移動端開發時，必須要了解視口，即viewport。

　　PC: 要適配所有pc端頁面用版心， pc基于版心進行布局的

　　3、布局方式

　　移動端的特點：

　　1.手機端的兼容性問題比PC端小很多，因為手機端的瀏覽器版本比較新（對H5的支持比較好）

　　2.手機端屏幕比較小，能夠放的內容比較少。

　　那么問題來了：布局的時候怎么解決屏幕大小不一致的問題？

　　PC端，固定版心，讓所有分辨率的電腦的版心都是一樣的，比如新浪、網易等。

　　移動端：移動端無法設置版心，因為移動端的設備屏幕本身就小，設置版心不合適。因此移動端大多會采用流式布局（百分比布局）

　　流式布局，也叫百分比布局，是移動端開發中經常使用的布局方式之一。

　　流式布局的特征：

　　寬度自適應，高度固定，并不是百分百還原設計圖。

　　流式布局無法做到所有設備都非常逼真的還原設計圖，有些設備顯示效果不是特別的好看。但是流式布局是移動端非常常用的一種布局方式，比較簡單。

　　要進行移動端開發最好了解一下響應式布局以及flex布局，flex布局也是移動端的主流布局方式。

　　三 移動端調試問題

　　手機設備五花八門，屏幕尺寸都大不一樣，尤其是安卓端，給我們的頁面預覽帶來了一些麻煩。在實際工作中，作為開發者不可能有足夠的設備讓我們去測試（除了測試部門 ），即便有，效率也特別的低，因此開發者一般都是通過瀏覽器的手機模擬器來模擬不同的設備。

　　以下以chrome瀏覽器為例，介紹手機模擬器的使用：

　　第1步：打開瀏覽器，按下F12鍵，點擊下面第二個圖標：

　　第2步：以下就是手機模擬器界面：

　　在這個界面里可以選擇各種手機設備進行調試。

　　四、移動web開發的框架

　　用于移動web開發的框架比較多，這里列舉幾個：

　　1. VUE

　　Vue （讀音 /vju?/，類似于 view） 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。vue.js是目前國內最火的一個前端框架。

　　2. jquery mobile框架

　　jQuery Mobile是jQuery 在移動設備上的版本。jQuery Mobile

　　天生的jQuery核心庫會給開發老的程序員不錯的編程體難，而且有一個完整統一的jQuery移動UI框架。

　　3. bootstrap框架

　　Bootstrap 是基于 html、css和javascript 的，它簡潔靈活高效，使得 Web 開發更加快捷。它由Twitter推出的一個html、css框架。

　　4. AngularJS

　　AngularJS主要用于構建單頁面Web應用。它通過增加開發人員和常見Web應用開發任務之間的抽象級別，使構建交互式的現代Web應用變得更加簡單

　　5. MUI

　　官方宣稱的最接近原生APP體驗的高性能前端框架。提供了以iOS 7為基礎的豐富的UI控件，并補充部分Android平臺特有的UI控件。

關于“怎么用HTML5開發移動web”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。