1、第一背景圖片必須采用backgroundsizecover來實現(xiàn)第二我們在進行H5頁面內(nèi)容規(guī)劃布局設計的時候，不能把重要內(nèi)容放在太偏下的位置或者偏上，否則前端布局時可能出現(xiàn)內(nèi)容顯示不全的情況；手機瀏覽器是把頁面放在一個虛擬的quot窗口quotviewport中，通常這個虛擬的quot窗口quotviewport比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局，用戶可以通過平移和縮放來看；這里以移動端響應式網(wǎng)站為例，講述如何制作響應式網(wǎng)頁#xF4CF選定基本設計尺寸選定基本設計尺寸，一般以1080為基準確定響應式web設計的應用場景之后，和美工或設計師溝通，之前，一般需要美工出幾套主流移動設備屏幕分辨率的設計圖，現(xiàn)在，使用；23 點擊22中的網(wǎng)站名就會在電腦上打開Safari的控制臺，如下圖點擊查看大圖3調(diào)試網(wǎng)頁 此時你可以查看手機網(wǎng)頁的DOM結構，并且和電腦端網(wǎng)頁調(diào)試無異，當鼠標滑過這些DOM節(jié)點的時候手機上的相應布局也會高亮起來，如；1html5主頁面 lt！doctype html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=1 userscalable=0quot lttitlehtml5 移動端單頁面布局lt。

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

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

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