近幾年來，隨著移動(dòng)因特網(wǎng)的迅速發(fā)展，移動(dòng)用戶的數(shù)量也不斷超過PC用戶。這就意味著，除了智能手機(jī)，使用平板電腦和電視機(jī)上網(wǎng)的用戶也在不斷增長(zhǎng)。如何使我們的網(wǎng)站在這種情況下盡可能地兼容各種設(shè)備，并確保良好的用戶體驗(yàn)，將變得越來越重要。那么通過響應(yīng)式的設(shè)計(jì)開發(fā)方式，就可以使網(wǎng)站頁(yè)面根據(jù)不同的瀏覽設(shè)備而自行響應(yīng)，動(dòng)態(tài)調(diào)整布局結(jié)構(gòu)，元素規(guī)格樣式，將相同內(nèi)容以不同格式呈現(xiàn)給不同設(shè)備的用戶。接下來就分享一下html5網(wǎng)頁(yè)制作的超實(shí)用流程。
了解目標(biāo)用戶的設(shè)備類型和屏幕尺寸；
對(duì)目標(biāo)用戶使用設(shè)備的基本情況進(jìn)行分析和統(tǒng)計(jì)，明確設(shè)備的類型和屏幕大小，例如，移動(dòng)設(shè)備手機(jī)端以及平板端，在設(shè)計(jì)和實(shí)現(xiàn)時(shí)要注意增加收集功能，至于屏幕的尺寸，在設(shè)計(jì)時(shí)要注意手機(jī)的橫向、縱向以及平板端的尺寸，而電腦端則要注意普屏和寬屏屏幕。
裝置類型：包括移動(dòng)裝置(手機(jī)，平板電腦)和電腦。對(duì)移動(dòng)設(shè)備來說，在設(shè)計(jì)和實(shí)現(xiàn)時(shí)要注意增加手勢(shì)功能。屏面大?。喊ǜ鞣N手機(jī)屏幕(橫屏和豎屏)，各種平板的尺寸(橫屏和豎屏)，普通電腦和寬屏。要考慮的問題：當(dāng)頁(yè)面用于響應(yīng)式設(shè)計(jì)時(shí)，它適用于哪種尺寸？比如，某搜索網(wǎng)站的搜索結(jié)果頁(yè)，頁(yè)面跨度可以從手機(jī)到寬屏，而首頁(yè)，由于結(jié)構(gòu)過于復(fù)雜，想直接移植到手機(jī)，也不太現(xiàn)實(shí)，不如直接設(shè)計(jì)一個(gè)手機(jī)首頁(yè)。將用戶需求與實(shí)現(xiàn)成本相結(jié)合，確定適用尺寸。如有些功能操作頁(yè)面，用戶一般不需要在移動(dòng)端進(jìn)行操作，無需響應(yīng)式設(shè)計(jì)。
二、制作線框原型。
html5網(wǎng)頁(yè)制作過程。對(duì)于確定下來的幾個(gè)尺寸分別制作不同的線框原型，需要考慮清楚不同尺寸下的頁(yè)面布局是如何變化的，內(nèi)容尺寸是如何調(diào)整的，功能，內(nèi)容的刪減，甚至特殊環(huán)境的特殊設(shè)計(jì)等等，這一過程需要設(shè)計(jì)師和前端開發(fā)人員保持密切的溝通。
必須強(qiáng)調(diào)的是，響應(yīng)式設(shè)計(jì)的目的在于，針對(duì)不同設(shè)備的屏幕規(guī)格區(qū)間，對(duì)功能和內(nèi)容的輸出格式進(jìn)行預(yù)設(shè)，因此在網(wǎng)站制作中，只需選擇一些典型的設(shè)備，而不必考慮所有已知的規(guī)格類型，我們制作線框原型的主要目的是規(guī)劃出樣式背后的邏輯。

三、測(cè)試線框原型。
把照片導(dǎo)入相應(yīng)的設(shè)備中進(jìn)行一些簡(jiǎn)單的測(cè)試，可以幫助我們盡早發(fā)現(xiàn)易訪問性、可讀性等方面的問題。
四、視覺設(shè)計(jì)
在html5網(wǎng)頁(yè)制作過程中注意到，移動(dòng)設(shè)備的屏幕像素密度不同于傳統(tǒng)的計(jì)算機(jī)屏幕，在設(shè)計(jì)時(shí)需要保證內(nèi)容文本的可讀性，控制可點(diǎn)擊區(qū)域的面積等等。
(1)盡可能保持小屏幕規(guī)格樣式簡(jiǎn)潔明了。關(guān)于UI元素的風(fēng)格，可以多和前端開發(fā)人員溝通，盡量采用CSS3可以實(shí)現(xiàn)的常規(guī)風(fēng)格，減少背景圖片的使用。
要保證內(nèi)容的字體字號(hào)在所有設(shè)備上都是可讀的，特別是在手機(jī)上。
與傳統(tǒng)的Web設(shè)計(jì)開發(fā)類似，最終生成的頁(yè)面必然會(huì)與視覺效果不一致，特別是對(duì)響應(yīng)式網(wǎng)站而言，由于在布局結(jié)構(gòu)和細(xì)節(jié)樣式等方面都需要有能力進(jìn)行更改，因此在開發(fā)過程中產(chǎn)生設(shè)計(jì)還原度問題的可能性更大。
五、前端實(shí)施。
響應(yīng)式設(shè)計(jì)的頁(yè)面相對(duì)于傳統(tǒng)的web開發(fā)而言，由于頁(yè)面布局、內(nèi)容大小的改變，所以最終的輸出更可能與設(shè)計(jì)稿不一致，這需要前端開發(fā)人員和設(shè)計(jì)師進(jìn)行多方面的溝通。