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

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、黔西南州ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的黔西南州網(wǎng)站制作公司

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

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

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

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

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

1、瀏覽器不同

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

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

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

2、屏幕尺寸

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

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

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

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

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

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

3、布局方式

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

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

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

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

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

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

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

流式布局的特征：

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

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

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

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

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

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

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

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

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

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

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

1. VUE

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

2. jquery mobile框架

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

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

3. bootstrap框架

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

4. AngularJS

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

5. MUI

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

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