怎么用HTML5開發(fā)移動(dòng)web

這篇文章將為大家詳細(xì)講解有關(guān)怎么用HTML5開發(fā)移動(dòng)web，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　一、移動(dòng)web開發(fā)現(xiàn)狀：

　　當(dāng)下人們使用頻率最高的設(shè)備莫過于手機(jī)了，大家對網(wǎng)站的認(rèn)知是越來越清晰，網(wǎng)站建設(shè)已成為企業(yè)宣傳與營銷的重要途徑，隨之移動(dòng)端網(wǎng)站建設(shè)也成趨勢。

　　移動(dòng)web 開發(fā)指的是需要適配移動(dòng)設(shè)備的網(wǎng)頁開發(fā)。

　　移動(dòng)web開發(fā)與pc端web開發(fā)沒有本質(zhì)的區(qū)別，使用的還是HTML/CSS/JavaScript的技術(shù)。

　　二、移動(dòng)端與pc端 web開發(fā)的區(qū)別

　　1、瀏覽器不同

　　移動(dòng)端的瀏覽器與pc端不同

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

　　國內(nèi)的手機(jī)瀏覽器都是根據(jù)webkit內(nèi)核修改過來的，國內(nèi)沒有自主研發(fā)的內(nèi)核，國內(nèi)的操作系統(tǒng)也是基于Android系統(tǒng)修改的。因此在移動(dòng)端，css3屬性只需要加webkit前綴即可。

　　2、屏幕尺寸

　　移動(dòng)端設(shè)備尺寸不一樣（尺寸非常多，碎片化很嚴(yán)重）

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

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

　　讓頁面在不同手機(jī)屏幕中進(jìn)行適配，寬度自適應(yīng)， 基于手機(jī)全屏進(jìn)行布局；

　　在進(jìn)行移動(dòng)端開發(fā)時(shí)，必須要了解視口，即viewport。

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

　　3、布局方式

　　移動(dòng)端的特點(diǎn)：

　　1.手機(jī)端的兼容性問題比PC端小很多，因?yàn)槭謾C(jī)端的瀏覽器版本比較新（對H5的支持比較好）

　　2.手機(jī)端屏幕比較小，能夠放的內(nèi)容比較少。

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

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

　　移動(dòng)端：移動(dòng)端無法設(shè)置版心，因?yàn)橐苿?dòng)端的設(shè)備屏幕本身就小，設(shè)置版心不合適。因此移動(dòng)端大多會(huì)采用流式布局（百分比布局）

　　流式布局，也叫百分比布局，是移動(dòng)端開發(fā)中經(jīng)常使用的布局方式之一。

　　流式布局的特征：

　　寬度自適應(yīng)，高度固定，并不是百分百還原設(shè)計(jì)圖。

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

　　要進(jìn)行移動(dòng)端開發(fā)最好了解一下響應(yīng)式布局以及flex布局，flex布局也是移動(dòng)端的主流布局方式。

　　三 移動(dòng)端調(diào)試問題

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

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

　　第1步：打開瀏覽器，按下F12鍵，點(diǎn)擊下面第二個(gè)圖標(biāo)：

　　第2步：以下就是手機(jī)模擬器界面：

　　在這個(gè)界面里可以選擇各種手機(jī)設(shè)備進(jìn)行調(diào)試。

　　四、移動(dòng)web開發(fā)的框架

　　用于移動(dòng)web開發(fā)的框架比較多，這里列舉幾個(gè)：

　　1. VUE

　　Vue （讀音 /vju?/，類似于 view） 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。vue.js是目前國內(nèi)最火的一個(gè)前端框架。

　　2. jquery mobile框架

　　jQuery Mobile是jQuery 在移動(dòng)設(shè)備上的版本。jQuery Mobile

　　天生的jQuery核心庫會(huì)給開發(fā)老的程序員不錯(cuò)的編程體難，而且有一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。

　　3. bootstrap框架

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

　　4. AngularJS

　　AngularJS主要用于構(gòu)建單頁面Web應(yīng)用。它通過增加開發(fā)人員和常見Web應(yīng)用開發(fā)任務(wù)之間的抽象級(jí)別，使構(gòu)建交互式的現(xiàn)代Web應(yīng)用變得更加簡單

　　5. MUI

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

關(guān)于“怎么用HTML5開發(fā)移動(dòng)web”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。