1、首先需要考慮是全平臺(tái)適配還是只是移動(dòng)端適配這里以移動(dòng)端響應(yīng)式網(wǎng)站為例，講述如何制作響應(yīng)式網(wǎng)頁(yè)#xF4CF選定基本設(shè)計(jì)尺寸選定基本設(shè)計(jì)尺寸，一般以1080為基準(zhǔn)確定響應(yīng)式web設(shè)計(jì)的應(yīng)用場(chǎng)景之后，和美工或設(shè)計(jì)師溝通，之前，一般需要美工出幾。

2、點(diǎn)擊制作欄目，進(jìn)入模板選擇頁(yè) 1選擇空模板，自由創(chuàng)作 2選擇主題模板，更快速的創(chuàng)作出炫麗的展示選擇模板后，進(jìn)入創(chuàng)作界面 預(yù)覽樹(shù)操作 1顯示的頁(yè)面的顯示順序 2右鍵調(diào)整頁(yè)面的顯示順序 3點(diǎn)擊頁(yè)面右上角的。

3、maka編輯器手機(jī)版是一款強(qiáng)大的模板設(shè)計(jì)軟件，讓你可以通過(guò)這款應(yīng)用快速打造出自己喜歡HTML5項(xiàng)目，方便你隨時(shí)隨地創(chuàng)作管理，一鍵生成，媲美專業(yè)設(shè)計(jì)師，讓你的營(yíng)銷(xiāo)更有個(gè)性，MAKA，做出好設(shè)計(jì)是兼顧H5海報(bào)視頻函單頁(yè)。

4、1在手機(jī)上打開(kāi)百度H5這個(gè)網(wǎng)頁(yè)制作軟件，選擇新建一個(gè)頁(yè)面就會(huì)出現(xiàn)這樣的背景，手機(jī)網(wǎng)頁(yè)可以在這里進(jìn)行制作2直接使用模板來(lái)進(jìn)行制作，從軟件的模板庫(kù)中選擇一個(gè)模板作為手機(jī)網(wǎng)頁(yè)的模板3也可以根據(jù)自己的需求對(duì)手機(jī)頁(yè)面。

5、WAP是無(wú)線應(yīng)用協(xié)議的縮寫(xiě)，一種實(shí)現(xiàn)移動(dòng)電話與互聯(lián)網(wǎng)結(jié)合的應(yīng)用協(xié)議標(biāo)準(zhǔn)wap網(wǎng)站也就是我們通常說(shuō)的手機(jī)站？2html5是W3C制定的超文本標(biāo)記語(yǔ)言html的第五次修改，通過(guò)html5制作的網(wǎng)站可以靈活運(yùn)行于PC，平板，手機(jī)等。

6、2手機(jī)工具APP相比起工具網(wǎng)站來(lái)講，顯得比較順手，有大量模板套用，制作簡(jiǎn)單快捷但是拘泥于現(xiàn)有的模板，使得單頁(yè)面不會(huì)有較大的可操作空間，從而無(wú)法實(shí)現(xiàn)DIY交互效果下面展開(kāi)說(shuō)下每個(gè)使用過(guò)的工具吧 基于HTML5的工具網(wǎng)站。

7、1首先，下載安裝WebEditorLite，這個(gè)直接在手機(jī)應(yīng)用商店中搜索就行，如下，大概也就431K2安裝完成后，打開(kāi)這個(gè)軟件，主界面如下，主要分為3部分，分別是“NewFile新建文件”“OpenFile打開(kāi)文件”和“AboutAPP。

8、2去html5頁(yè)面制作平臺(tái)，如vxplowixmakaim都可以做html5的手機(jī)頁(yè)面，不過(guò)wix現(xiàn)在沒(méi)有中文網(wǎng)站vxplo功能很齊全，但同時(shí)操作很復(fù)雜，一般人不會(huì)使用makaim通過(guò)模板組合添加圖文的方式制作，適合剛?cè)腴T(mén)的同學(xué)。

9、考慮選用h5技術(shù)，如今技術(shù)已日趨成熟，由于電腦用戶端瀏覽器升級(jí)困難等問(wèn)題，導(dǎo)致html5難以在電腦瀏覽器完全實(shí)現(xiàn)，然而對(duì)于手機(jī)瀏覽器，更新容易，大多數(shù)瀏覽器都支持，這給手機(jī)網(wǎng)站的發(fā)展帶來(lái)了轉(zhuǎn)機(jī)現(xiàn)在手機(jī)制作網(wǎng)站用的是響應(yīng)。

10、現(xiàn)在國(guó)內(nèi)已經(jīng)出現(xiàn)一批html5頁(yè)面制作平臺(tái)，讓不懂編程的用戶也能自己制作國(guó)內(nèi)制作html5頁(yè)面的平臺(tái)出名的有makaim和vxplo，makaim通過(guò)選擇模板，添加效果圖文即可完成制作，vxplo界面類似于photoshop，個(gè)性化程度高，但是操作。

11、如今國(guó)內(nèi)使用html5開(kāi)發(fā)app應(yīng)用技術(shù)尚有欠缺，因?yàn)樵谑謾C(jī)開(kāi)發(fā)app上，html5應(yīng)用只有兩種方法，要不就是全使用HTML5的語(yǔ)法，要不就是僅使用JavaScript引擎JavaScript引擎的構(gòu)建方法讓制作手機(jī)網(wǎng)頁(yè)游戲成為可能由于界面層很復(fù)雜。

12、不一樣，需增加自適應(yīng)標(biāo)簽來(lái)保持一樣代碼如下ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=10， minimumscale=10， maximumscale=10， userscalable=noquot 解釋Viewport指用戶網(wǎng)頁(yè)的。

13、你說(shuō)的類似于響應(yīng)式布局，這個(gè)css就能實(shí)現(xiàn)，有兩種方法1用@media通過(guò)判斷瀏覽器的分辨率代碼自動(dòng)能判斷來(lái)調(diào)取不同的css樣式這就需要寫(xiě)不同的css，主要是寬度的調(diào)整。

14、1響應(yīng)式設(shè)計(jì)需要做的有很多技術(shù)和技巧，和做電腦端網(wǎng)頁(yè)一樣，響應(yīng)式開(kāi)發(fā)需要div等元素就可以自動(dòng)適應(yīng)屏幕大小，就是在設(shè)置每個(gè)元素屬性的時(shí)候要用百分比，最好不要用px 2當(dāng)下響應(yīng)式布局設(shè)計(jì)需要使用HTML5技術(shù)和CSS3技術(shù)。

15、用以下代碼開(kāi)頭lt！DOCTYPE HTMLlthtmlltheadltmeta charset=quotutf8quotltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=1quot 使用百分比定義寬度CSS代碼可以適當(dāng)使用media only screen and max。

16、33 點(diǎn)擊22中的網(wǎng)站名就會(huì)在電腦上打開(kāi)Safari的控制臺(tái)，如下圖點(diǎn)擊查看大圖3調(diào)試網(wǎng)頁(yè) 如上33圖所示，此時(shí)你可以查看手機(jī)網(wǎng)頁(yè)的DOM結(jié)構(gòu)，并且和電腦端網(wǎng)頁(yè)調(diào)試無(wú)異，當(dāng)鼠標(biāo)滑過(guò)這些DOM節(jié)點(diǎn)的時(shí)候手機(jī)上的相應(yīng)布局。