關于響應式網站的設計與開發研究

趙文艷

摘 要： 作為開發策略與設計哲學，響應式網站設計是一項能夠與PC、平板電腦、手機等設備相適應的網頁瀏覽技術，該技術以CSS媒體查詢為基礎，配合不同環境，結合媒體查詢技術。本文介紹了一個以Bootstrap框架模板為基礎的響應式網站，報告如下。

關鍵詞： 設計與開發；響應式網站；研究分析

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

1.響應式網站設計概述

1.1響應式網站設計特點

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

1.2廣義的響應式開發流程

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

1.3響應式設計的優點

在響應式設計體系下，僅僅通過一個代碼庫就能夠對市面上所有的設備與瀏覽器的兼容性問題進行處理。各種網頁應用環境下的不確定性可以通過靈活性的設計思路來進行化解，該技術的應用優勢主要體現在以下幾個方面：

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

2.CSS概述

CSS屬于層疊樣式的一種，相比于傳統表格布局來說，CSS布局能夠對頁面的模式與版式進行更加自由的控制。通過CSS對模式進行定義的優點在于它一方面能夠對對齊、尺寸以及字體等方面的格式屬性進行控制，同時也能夠通過特殊效果、位置等方面的NTML屬性進行控制。常見的CSS前端框架主要包含Bootstrap by Twitter、U1K1t by Y00theme、Foundat1on by ZURB、Semantic UI、Pure by Yahoo等。

3.響應式網站的設計

本次研究以Bootstrap響應式框架為基礎來改進某校實驗中心網站。Bootstrap中自帶許多網頁制作常用的樣式、組件和JS插件，依照其不同的功能與用途進行劃分，劃分內容如下：第一，全局CSS樣式。全局CSS樣式能夠以跨瀏覽器的情況下對HTML元素進行標準化處理，將部分基礎模式添加至設計內容中；第二，組件。Bootstrap組件近20種，單導航組件就有形式不同的多個樣式，比如側導航和導航欄等，通過專門的分布或面包屑來對文章進行分頁翻閱；第二，JavaScript插件。JavaScript插件是基于Jquery實現的，它提供了許多動態效果，插件為 Bootstrap 的組件增添了“活力”。可以簡單地一次性引入所有插件，或者逐個引入到你的頁面中。

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

結束語：

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

參考文獻

[1]劉金承.響應式網站的設計與開發[J].科技傳播，2016，818：133-134+139.

[2]趙玲，隋欣，陳宸，胡巧龍，鄧舉名，關雅麗.基于SEO優化的響應式公益網站設計[J].電腦編程技巧與維護，2017，07：17-18.

[3]鄭逸凡.響應式網站設計探析[J].南昌師范學院學報，2017，3803：35-37.