1、第一背景圖片必須采用backgroundsizecover來(lái)實(shí)現(xiàn)第二我們?cè)谶M(jìn)行H5頁(yè)面內(nèi)容規(guī)劃布局設(shè)計(jì)的時(shí)候，不能把重要內(nèi)容放在太偏下的位置或者偏上，否則前端布局時(shí)可能出現(xiàn)內(nèi)容顯示不全的情況；手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的quot窗口quotviewport中，通常這個(gè)虛擬的quot窗口quotviewport比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁(yè)擠到很小的窗口中這樣會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局，用戶可以通過(guò)平移和縮放來(lái)看；這里以移動(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ì)師溝通，之前，一般需要美工出幾套主流移動(dòng)設(shè)備屏幕分辨率的設(shè)計(jì)圖，現(xiàn)在，使用；23 點(diǎn)擊22中的網(wǎng)站名就會(huì)在電腦上打開(kāi)Safari的控制臺(tái)，如下圖點(diǎn)擊查看大圖3調(diào)試網(wǎng)頁(yè) 此時(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)布局也會(huì)高亮起來(lái)，如；1html5主頁(yè)面 lt！doctype html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=1 userscalable=0quot lttitlehtml5 移動(dòng)端單頁(yè)面布局lt。

2、在移動(dòng)端上，一定要讓用戶快速了解業(yè)務(wù)和內(nèi)容，快速做出購(gòu)買決策的過(guò)程五頁(yè)面布局到第3屏幕牢牢相扣移動(dòng)端app多數(shù)頁(yè)面都是設(shè)計(jì)到3屏幕左右電商來(lái)說(shuō)，一個(gè)頁(yè)面的上下信息流轉(zhuǎn)的過(guò)程是十分流暢的拿電商詳情頁(yè)來(lái)說(shuō)，首先展示圖片對(duì)于；3首先點(diǎn)擊我的場(chǎng)景接著點(diǎn)擊制作場(chǎng)景，接著會(huì)進(jìn)入場(chǎng)景模板選擇界面，里面有很多免費(fèi)的模板4可以在模板中心選擇一個(gè)自己需要的點(diǎn)擊，直接套用模板，也可以選擇自己創(chuàng)建一個(gè)空白頁(yè)面5進(jìn)入后就可以根據(jù)自己的；HTML5的移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)稿，通常情況下，內(nèi)容區(qū)為750px或960px或者1080px的，一般不小于750px像素大小寬度設(shè)計(jì)稿可以比750px大，但是絕對(duì)不能比750px小，這個(gè)主要是由于當(dāng)前手機(jī)的分辨率相對(duì)較高iPhone6是375物理像素；rem布局的兼容性Mozilla Firefox 36+Apple Safari 5+Google ChromeIE9+和Opera11+ie6ie8 還是別用rem 不過(guò)現(xiàn)在的手機(jī)一般瀏覽器，一般可以直接不用去管IE內(nèi)核的瀏覽器了REM的計(jì)算公式 例html 設(shè)置font。

3、移動(dòng)端不同于PC端，最大的區(qū)別是屏幕尺寸的限制，相同的內(nèi)容顯示效率要低很多如果直接按照PC端顯示所有內(nèi)容，頁(yè)面信息自然混亂不堪作為交互設(shè)計(jì)師需要對(duì)信息進(jìn)行優(yōu)先級(jí)劃分，并且合理布局，提升信息的傳遞效率下面來(lái)談?wù)劊贿@里我畫(huà)了幾種移動(dòng)端常見(jiàn)的頁(yè)面布局和他們的各自特點(diǎn)1，列表式布局 2，陳列式布局 3，九宮格式布局 4，選項(xiàng)卡式布局 5，輪播圖式布局 6，伸展式布局 7，抽屜式布局 8，彈出框式布局 9，橫向拓展式布局 10多面板。

4、假設(shè)設(shè)計(jì)圖大小為1080px這也就意味著，在開(kāi)發(fā)時(shí)，需要兼容的最大分辨率為1080px，最小的為320px2 調(diào)整視口 代碼實(shí)例lt！DOCTYPE htmllthead ltmeta charset=quotUTF8quot lttitle布局之路移動(dòng)端開(kāi)發(fā)實(shí)例；9網(wǎng)頁(yè)布局分為自然布局，浮動(dòng)布局， 定位布局 10當(dāng)一個(gè)元素被定義為浮動(dòng)顯示時(shí)，即定義為塊狀元素并且該元素就會(huì)收縮自身體積為最小狀態(tài)所以，應(yīng)該有個(gè)好的習(xí)慣即把浮動(dòng)元素設(shè)置高和寬如果沒(méi)有設(shè)置，則元素會(huì)按；1可直接長(zhǎng)按此時(shí)間運(yùn)營(yíng)商插件，拖動(dòng)到屏幕左側(cè)或右側(cè)移動(dòng)到其它頁(yè)面顯示2或者長(zhǎng)按刪除此時(shí)間插件，到手機(jī)主菜單應(yīng)用列表點(diǎn)擊屏幕上方的“窗口小部件”找到“運(yùn)營(yíng)商與時(shí)間”長(zhǎng)按拖動(dòng)到中間的頁(yè)面即可用手機(jī)掛；當(dāng)屏幕超過(guò)最大和最小寬度時(shí)，頁(yè)面將不再適合屏幕 彈性布局 靈活布局采用寬度和高度同時(shí)放大的方法，力求不同屏幕下頁(yè)面布局一致 靈活布局兼顧了靜態(tài)布局和流式布局的優(yōu)點(diǎn)一方面可以適應(yīng)屏幕的變化，另一方面也不會(huì)造成頁(yè)面橫向加寬。