顏春艷 南京技師學(xué)院

一、響應(yīng)式web設(shè)計(jì)概述

越來越多的人使用小屏幕設(shè)備上網(wǎng)，針對不同屏幕的設(shè)備開發(fā)不同頁面成本非常大，這時(shí)響應(yīng)式Web設(shè)計(jì)應(yīng)運(yùn)而生。響應(yīng)式Web設(shè)計(jì)是由Ethan Marcotte在2010 年提出的，他將媒體查詢、柵格布局和彈性圖片合并稱為響應(yīng)式Web設(shè)計(jì)。

從設(shè)計(jì)理念看，響應(yīng)式Web設(shè)計(jì)是一種針對任意設(shè)備對網(wǎng)頁內(nèi)容進(jìn)行完美布局的顯示方式，與原始設(shè)計(jì)方式相比有以下兩點(diǎn)突破。

（一）一個(gè)網(wǎng)頁設(shè)計(jì)，多個(gè)設(shè)備使用

隨著移動產(chǎn)品發(fā)展，出現(xiàn)了各種屏幕尺寸的手機(jī)、Pad等移動設(shè)備，而針對每一種尺寸的設(shè)備都獨(dú)立開發(fā)一個(gè)網(wǎng)站，成本會非常高，如果要找一個(gè)成本、設(shè)計(jì)、性能的平衡點(diǎn)，響應(yīng)式設(shè)計(jì)是最好的選擇。它可以做到一處設(shè)計(jì)，相應(yīng)多種屏幕。

（二）移動優(yōu)先

以前的網(wǎng)站開發(fā)大多數(shù)是先開發(fā)PC端，再根據(jù)PC端的網(wǎng)頁及功能設(shè)計(jì)開發(fā)移動端。然而，隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，使用移動端上網(wǎng)的用戶群已經(jīng)趕超PC端。由于移動設(shè)備的屏幕小、計(jì)算資源低，如果我們先開發(fā)移動端，再開發(fā)PC端，可以迫使開發(fā)人員在更小、計(jì)算資源更低的設(shè)備中設(shè)計(jì)產(chǎn)品功能。這樣做，一是可以使產(chǎn)品功能更加核心和簡潔，二是有助于設(shè)計(jì)出性能更高的程序。

二、響應(yīng)式web設(shè)計(jì)特點(diǎn)

下面從用戶體驗(yàn)和技術(shù)層面兩個(gè)方面來陳述響應(yīng)式Web設(shè)計(jì)的特點(diǎn)。

（一）用戶體驗(yàn)

用戶體驗(yàn)對于網(wǎng)站的運(yùn)營是至關(guān)重要的，網(wǎng)站如果沒有良好的用戶體驗(yàn)，那么就算里面的內(nèi)容再精彩，用戶也無心瀏覽下去。通常，網(wǎng)站會在移動瀏覽器上縮放，這樣雖然可以完整地給我們呈現(xiàn)想要瀏覽的內(nèi)容，但鑒于移動設(shè)備屏幕大小的限制，用戶也能難找到自己關(guān)注的內(nèi)容。而響應(yīng)式Web設(shè)計(jì)并不是將整個(gè)網(wǎng)頁縮放給用戶，而是經(jīng)過精心篩選，有選擇性地顯示頁面的內(nèi)容。

例如一個(gè)網(wǎng)站在pc端大屏幕的頁面效果如圖1所示，而如果在移動端小屏幕上，按比例縮小的話文字就會看不清，使用響應(yīng)式Web開發(fā)可以讓該界面呈現(xiàn)縱向排列方式，如圖2所示。

圖1

圖2

（二）技術(shù)層面

在技術(shù)層面，響應(yīng)式Web設(shè)計(jì)是和HTML5+CSS3互相配合與支持的，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)包括以下技術(shù)點(diǎn)。

1.HTML5+CSS3的基本網(wǎng)頁設(shè)計(jì)。

2.HTML5中的viewport：提供可以配置視口的屬性。

3.CSS3媒體查詢：識別媒體類型、特征（屏幕寬度、像素比等）。

4.流式布局：可以根據(jù)瀏覽器的寬度和屏幕的大小自動調(diào)整效果。

5.響應(yīng)式柵格系統(tǒng)：依賴于媒體查詢，根據(jù)不同的屏幕大小調(diào)整布局。

6.流失圖片：隨流式布局進(jìn)行相應(yīng)縮放。

實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)，簡單說就是根據(jù)顯示屏幕大小的變化控制頁面的文檔流。用戶利用媒體查詢設(shè)計(jì)不同尺寸設(shè)備下的網(wǎng)頁的外觀形式，利用響應(yīng)式柵格系統(tǒng)和彈性盒子可以方便的設(shè)計(jì)出不同尺寸設(shè)備下的網(wǎng)頁布局形式，從而實(shí)現(xiàn)針對不同終端設(shè)備顯示出最佳的效果，達(dá)到響應(yīng)式的目的。

三、bootstrap的在響應(yīng)式web中的應(yīng)用

響應(yīng)式布局雖然能夠解決不同終端設(shè)備瀏覽同一網(wǎng)頁的問題，也帶給了用戶很好的體驗(yàn)，然后對于開發(fā)者來說，還是有很多細(xì)節(jié)需要調(diào)整，相對來說是個(gè)比較復(fù)雜的過程，這時(shí)bootstrap的出現(xiàn)給編程者帶來一個(gè)很好的開發(fā)工具，它提供了用戶友好、跨瀏覽器的解決方案，讓響應(yīng)式變得容易實(shí)現(xiàn)，大大提高了前端開發(fā)的工作效率。

（一）bootstrap簡介

bootstrap是由Twitter推出的前端開源工具包，它結(jié)合了HTML、CSS和JavaScript等前端技術(shù)。

（二）CSS媒體查詢

針對不同的設(shè)備，我們需要編寫適應(yīng)其特性的CSS代碼，bootstrap框架利用CSS媒體查詢有效地解決了這個(gè)問題，它首先對不同的型號媒體設(shè)備進(jìn)行查詢，判斷其屬于哪種設(shè)備，然后根據(jù)判斷結(jié)果在事先寫好的多種樣式中匹配最為合適的樣式。

舉例說明：當(dāng)屏幕分辨率最大寬度不超過768像素時(shí)，其背景色為綠色，當(dāng)其屏幕寬度在768像素到992像素之間時(shí)，將其背景設(shè)置為紅色，具體代碼如下：

（三）柵格系統(tǒng)

bootstrap提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口尺寸的增加，系統(tǒng)會自動分為最多12列，根據(jù)需要通過行列組合來創(chuàng)建頁面布局，開發(fā)者可以將內(nèi)容放入這些建好的布局中。Bootstrap3使用了4種柵格選項(xiàng)來形成柵格系統(tǒng)，這4中柵格選項(xiàng)適合不同尺寸的屏幕設(shè)備。如下表所示：

超小設(shè)備手機(jī)（＜768px）小型設(shè)備平板電腦（≥768px）中型設(shè)備臺式電腦（≥992px）以折疊開始，斷點(diǎn)以上是水平的最大容器寬度 None (auto) 750px 970px 1170px Class 前綴 .col-xs- .col-sm- .col-md- .col-lg-列數(shù)量和 12 12 12 12最大列寬 Auto 60px 78px 95px間隙寬度 30px 30px 30px 30px大大型設(shè)備臺式電腦（≥1200px）網(wǎng)格行為 一直是水平的以折疊開始，斷點(diǎn)以上是水平的以折疊開始，斷點(diǎn)以上是水平的

柵格系統(tǒng)可以讓用戶在不同尺寸設(shè)備上看見不同的布局效果，舉例說明如下：

當(dāng)屏幕是中等大小的時(shí)候運(yùn)行結(jié)果如下圖3所示，當(dāng)在小屏幕上顯示時(shí)效果如圖4所示，當(dāng)在超小屏幕上顯示時(shí)，效果如圖5所示。

圖3

圖4

圖5

四、結(jié)束語

本文主要介紹了響應(yīng)式web設(shè)計(jì)的概念、特點(diǎn)、bootstrap框架在響應(yīng)式web開發(fā)中的應(yīng)用，對其中的關(guān)鍵技術(shù)CSS媒體查詢和柵格系統(tǒng)，通過實(shí)例做了比較詳細(xì)的介紹。整合bootstrap編寫的網(wǎng)站在設(shè)備適配性、瀏覽器兼容性等方面較一般網(wǎng)站都有顯著的提高。另外，bootstrap的組件和插件也能在一定程度上縮短開發(fā)時(shí)間、節(jié)約人力物力成本。有關(guān)bootstrap的功能細(xì)節(jié)還需要在開發(fā)過程中進(jìn)行反復(fù)不斷地嘗試。