關(guān)于響應(yīng)式網(wǎng)站的設(shè)計(jì)與開發(fā)研究

趙文艷

摘 要： 作為開發(fā)策略與設(shè)計(jì)哲學(xué)，響應(yīng)式網(wǎng)站設(shè)計(jì)是一項(xiàng)能夠與PC、平板電腦、手機(jī)等設(shè)備相適應(yīng)的網(wǎng)頁瀏覽技術(shù)，該技術(shù)以CSS媒體查詢?yōu)榛A(chǔ)，配合不同環(huán)境，結(jié)合媒體查詢技術(shù)。本文介紹了一個(gè)以Bootstrap框架模板為基礎(chǔ)的響應(yīng)式網(wǎng)站，報(bào)告如下。

關(guān)鍵詞： 設(shè)計(jì)與開發(fā)；響應(yīng)式網(wǎng)站；研究分析

當(dāng)前我國已經(jīng)全面進(jìn)入移動(dòng)信息時(shí)代，移動(dòng)用戶量已經(jīng)趨于飽和，平板、手機(jī)等移動(dòng)設(shè)備成為民眾生活中的重要信息工具，為了改善用戶在瀏覽網(wǎng)頁過程中的體驗(yàn)，本文專門介紹了響應(yīng)式網(wǎng)站技術(shù)。首先，響應(yīng)式網(wǎng)站無論在PC端、平板還是手機(jī)上，均只設(shè)置一個(gè)URL接口；其次，響應(yīng)式網(wǎng)站設(shè)計(jì)通過媒體查詢來實(shí)現(xiàn)靈活性設(shè)計(jì)，獲取設(shè)備屏幕屬性、分辨率、設(shè)備類型等方面的信息，在布局過程中實(shí)現(xiàn)求同存異；第三，通過響應(yīng)式設(shè)計(jì)來適配手機(jī)，實(shí)現(xiàn)多終端、多平臺(tái)服務(wù)的一致性。

1.響應(yīng)式網(wǎng)站設(shè)計(jì)概述

1.1響應(yīng)式網(wǎng)站設(shè)計(jì)特點(diǎn)

第一，以百分比單位進(jìn)行流體式布局與以像素為單位進(jìn)行固定布局的傳統(tǒng)技術(shù)有著本質(zhì)性不同；第二，通過CSS語法規(guī)則進(jìn)行媒體查詢，模式的控制以參數(shù)為指導(dǎo)，依照不同設(shè)備中特有的CSS對(duì)界面進(jìn)行渲染，進(jìn)而實(shí)現(xiàn)與用戶設(shè)備環(huán)境的適配；第三，響應(yīng)式設(shè)計(jì)的目標(biāo)在于提高網(wǎng)頁對(duì)于各種不同設(shè)備的兼容性。在設(shè)計(jì)過程中需要對(duì)各種不同的邊界進(jìn)行劃分，對(duì)頁面布局進(jìn)行調(diào)整，對(duì)分辨率的“斷點(diǎn)”進(jìn)行有針對(duì)性的設(shè)定。

1.2廣義的響應(yīng)式開發(fā)流程

依照EthanMarcotte的定義，響應(yīng)式開發(fā)重點(diǎn)研究參考分辨率，即原本的字體、界面或網(wǎng)格為指定分辨率而設(shè)，為了能夠與不同的設(shè)備環(huán)境相適配，需要融入媒體查詢功能。若采取“移動(dòng)優(yōu)先”的設(shè)計(jì)思路，對(duì)于PC桌面的兼容性就比較差。因此，在具體的設(shè)計(jì)過程中，需要事先依照小屏的需求對(duì)網(wǎng)頁進(jìn)行設(shè)計(jì)，再通過媒體查詢功能，配合不同的屏幕分辨率。

1.3響應(yīng)式設(shè)計(jì)的優(yōu)點(diǎn)

在響應(yīng)式設(shè)計(jì)體系下，僅僅通過一個(gè)代碼庫就能夠?qū)κ忻嫔纤械脑O(shè)備與瀏覽器的兼容性問題進(jìn)行處理。各種網(wǎng)頁應(yīng)用環(huán)境下的不確定性可以通過靈活性的設(shè)計(jì)思路來進(jìn)行化解，該技術(shù)的應(yīng)用優(yōu)勢主要體現(xiàn)在以下幾個(gè)方面：

第一，對(duì)服務(wù)器進(jìn)行簡化。在響應(yīng)式設(shè)計(jì)具有充分合理性的情況下，小心地使用圖片，則能夠有效解決設(shè)備性能方面的問題，在應(yīng)對(duì)所有設(shè)備與所有用戶的過程中，也能夠?yàn)榉?wù)器端設(shè)計(jì)出一個(gè)最小化、的邏輯；第二，更容易維護(hù)。在響應(yīng)式設(shè)計(jì)技術(shù)的支持下，相關(guān)的維護(hù)工作只需要服務(wù)于一套前段代碼庫；第三，所需要投入使用的搜索引擎只有一個(gè)，單一的URL列表與單一的網(wǎng)站會(huì)使網(wǎng)站的設(shè)計(jì)工作更加容易；第四，支持未知設(shè)備。響應(yīng)式設(shè)計(jì)不需要考慮操作系統(tǒng)與設(shè)備的性能，網(wǎng)站設(shè)計(jì)的自動(dòng)適配性與兼容性得到進(jìn)一步的提升。

2.CSS概述

CSS屬于層疊樣式的一種，相比于傳統(tǒng)表格布局來說，CSS布局能夠?qū)撁娴哪Ｊ脚c版式進(jìn)行更加自由的控制。通過CSS對(duì)模式進(jìn)行定義的優(yōu)點(diǎn)在于它一方面能夠?qū)?duì)齊、尺寸以及字體等方面的格式屬性進(jìn)行控制，同時(shí)也能夠通過特殊效果、位置等方面的NTML屬性進(jìn)行控制。常見的CSS前端框架主要包含Bootstrap by Twitter、U1K1t by Y00theme、Foundat1on by ZURB、Semantic UI、Pure by Yahoo等。

3.響應(yīng)式網(wǎng)站的設(shè)計(jì)

本次研究以Bootstrap響應(yīng)式框架為基礎(chǔ)來改進(jìn)某校實(shí)驗(yàn)中心網(wǎng)站。Bootstrap中自帶許多網(wǎng)頁制作常用的樣式、組件和JS插件，依照其不同的功能與用途進(jìn)行劃分，劃分內(nèi)容如下：第一，全局CSS樣式。全局CSS樣式能夠以跨瀏覽器的情況下對(duì)HTML元素進(jìn)行標(biāo)準(zhǔn)化處理，將部分基礎(chǔ)模式添加至設(shè)計(jì)內(nèi)容中；第二，組件。Bootstrap組件近20種，單導(dǎo)航組件就有形式不同的多個(gè)樣式，比如側(cè)導(dǎo)航和導(dǎo)航欄等，通過專門的分布或面包屑來對(duì)文章進(jìn)行分頁翻閱；第二，JavaScript插件。JavaScript插件是基于Jquery實(shí)現(xiàn)的，它提供了許多動(dòng)態(tài)效果，插件為 Bootstrap 的組件增添了“活力”?？梢院唵蔚匾淮涡砸胨胁寮?，或者逐個(gè)引入到你的頁面中。

本文以Hbulider為設(shè)計(jì)工具，制作一個(gè)sitel.master頁面，將網(wǎng)站logo設(shè)置在網(wǎng)頁頂端，為網(wǎng)頁專門設(shè)置一個(gè)導(dǎo)航欄，導(dǎo)航欄與圖片logo均為響應(yīng)式，適配各種不同的分辨率，分辨率尺寸在768px的情況下，導(dǎo)航欄會(huì)變換為包含各種按鈕的長條，再對(duì)區(qū)域內(nèi)容布局。

結(jié)束語：

以靈活界面為基礎(chǔ)是響應(yīng)式網(wǎng)站設(shè)計(jì)的最大特點(diǎn)。具體工作是能夠使各種不同的移動(dòng)或非移動(dòng)設(shè)備可以高效地對(duì)網(wǎng)頁進(jìn)行瀏覽，改善用戶的瀏覽體驗(yàn)。在響應(yīng)式技術(shù)的支持下，能夠使網(wǎng)頁布局與各種不同的設(shè)備相適應(yīng)，在不同的硬件與系統(tǒng)環(huán)境下實(shí)現(xiàn)自我調(diào)整，該技術(shù)的應(yīng)用前景十分廣闊。

參考文獻(xiàn)

[1]劉金承.響應(yīng)式網(wǎng)站的設(shè)計(jì)與開發(fā)[J].科技傳播，2016，818：133-134+139.

[2]趙玲，隋欣，陳宸，胡巧龍，鄧舉名，關(guān)雅麗.基于SEO優(yōu)化的響應(yīng)式公益網(wǎng)站設(shè)計(jì)[J].電腦編程技巧與維護(hù)，2017，07：17-18.

[3]鄭逸凡.響應(yīng)式網(wǎng)站設(shè)計(jì)探析[J].南昌師范學(xué)院學(xué)報(bào)，2017，3803：35-37.