趙文艷

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

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

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

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

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

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

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

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

1.3響應(yīng)式設(shè)計的優(yōu)點

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

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

2.CSS概述

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

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

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

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

結(jié)束語：

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

參考文獻

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

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

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